Dynamically create Fancybox and stick video into it

Question

Hi. I need to replace all the HTML5 video tags on the page with their poster image that has a click event attached; the click event launches a Fancybox containing that video tag. Anyone know how to do this with jQuery? Thank you.

Answer 1

I've found that in the past the best way to use fancyBox with dialog videos is to create an empty flash video container div for your FLV player. Then on loading your fancyBox dialog you use the on fancyBox 'onStart' event to target the container div, populate it with the video player content. This then triggers the video to render in the div container you are already showing via fancyBox. The last part is getting the dimensions of the fancyBox correct post video load, this depends on your FLV player having an event to hook on to and the FLV player being able to provide you with the movie dimensions.

For a full tutorial on this approach see the following url:

integrated flowPlayer, fancyBox and carousel tutorial.

And for a demonstration of this in action see:

integration demonstration

Answer 2

Found a solution, called on the $(window).load function; the issue is to address a problem on Safari 5/iPad. I know we're not supposed to use browser-specific stuff, but this is the only way to solve this particular issue :)

$(window).load(function () {
 if (jQuery.browser.safari) {
   var videoTag = "";
   var posterPath = "";
   var replacement = "";
   var boxId = "";
   var el = "";
   $("[id^='vid-']").each(function(){
     videoTag = "";
     posterPath = "";
     replacement = "";
     boxId = "";
     el = "";

     el = $('[id='+this.id+']');
     videoTag = el.parent().html();
     posterPath = el.parent().find("img").attr("src");
     boxId = this.id + "_manual";
     replacement = "<a title='' id='" + boxId + "' href='javascript:;'><img src='" +
       posterPath + "' style='float:left; padding-left:5px; '/></a>"
     el.parent().replaceWith(replacement);

     $("[id="+boxId+"]").fancybox( 
         {
           'content'   : videoTag,
           'autoDimensions' :true,
           'padding'   : 9,
           'showCloseButton' : true,
           'enableEscapeButton': true       
         }
     ); // end click function
   }); // end each function
 }  // end if
}  // end load function

Answer 3

Maybe a better way would be to have a series of divs containing the poster img then attach an onclick event to the poster that renders the video tag (or changes the source of the video tag) in the box.

Mobile Safari allows click events to trigger a video to play so this should also work on the iPad. This also means users won't be required to click the poster image twice to play the video (since mobile Safari does not support the click event).