My Flash video or YouTube player stops playing when I use CSS display : none. Is there a workaround for this?
Answer:
Naturally, Flash video should stop playback when css display none is implemented.
Otherwise, the problem would become reversed in that the Flash player would
never stop playing even when you want it to. Generally, when css display none
is used, the hidden content is intended to be inactive. This behavior helps
prevent things like unwanted form submissions, accidental link clicks, or continuously
active objects.
The solution to this is to simply move the Flash object
out of the screen view rather than hiding it in position. After much of my own
experimentation, I found this to be the only method which works in all major
browsers AND with YouTube video. YouTube sometimes dies when resized using css,
then has to be restarted, which is not friendly to all browsers. However, if
you move the video container to a negative top and left position, the video
continues to play. This is easy to accomplish with jQuery.
For example, let’s say you have a YouTube video with the id attribute my-flash-id
which is 480 pixels x 385 pixels.
$('#my-flash-id').css({
position : 'absolute',
top : '-400px',
left : '-500px'
});
Notice that I added extra pixels to the positions just for good measure.
Or, you can create a css class to handle the move -
.offscreen {
position : absolute;
top : -400px;
left : -500px;
}
.onscreen {
position : relative;
}
And the jQuery code -
$('#my-flash-id').toggleClass('offscreen', true);
Downside:
If you don’t provide your website guests a way to stop playback, you will
lose the traffic. People like to be in control of their browsing experience
and many may find it more annoying than useful to have hidden Flash.
thanks, excelant !