Question

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

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