I have a Flash video which sits in a small box on the side of my website and plays video.
When the user clicks on a ‘View larger’ button I need it to display in a lightbox – but continue playing from the same place.
A simple piece of jquery like this works fine to move the video to another DIV (such as a jquery UI popup window).
$('.holder', dialog).append($("#DemoVideo")[0]);
However in Chrome + FF it restarts the video from the beginning – basically it reinitializes the <object>.
My solutions are either :
- Position it absolutely with CSS in the first place and move it to the popup with CSS and some nasty JS event resize handlers
- Remember the position and just instantiate a new video player and make the user live with the delay of rebuffering
Hopefully there’s some other clever way to move an <object> tag??
Note: this is the jwplayer – but applies to any Flash object
Not really, no. Any time you move or modify (in some cases) the object tag, you are reinitializing it. So in this case, your only choice is to modify the video’s
.holder– change class, styling, whatever – just not it’s HTML, because that will also reinitialize yourobjecttag.