Sunday, June 24, 2012

How to hide a html5/flash video, so that it does not reloads when its again made visible?

Have you ever faced a problem where once you 4hide an html5 or flash video by setting the visibility:none or simply using jquery $('#div-video-container').hide() and then doing a $('#div-video-container').show() actually reloading the video. Which means you would loose the position where you actually paused the video on hide. This behavior is seen mostly on firefox.

I recently faced the problem, and after lots of googling also I never got a solution which can work across all the browsers and be simple. Then finally i devised my own solution.

The simplest hack can be to lower the z-index of the div and introduce a newer div over it of higher z-index. Make sure this new div does'nt have a transparent background else the the video element would still be seen.

I hope this would be helpful.