Start local video in fancybox mit JWPlayer, video ID in url

Question

This is how I usually start a video file with fancybox and jwplayer.

Head:

 /* ... */
      

        

Answer 1

The method you are currently using is loading the video inline in a hidden div, then loading that div in fancybox.

I would follow a different approach: I would link to my videos directly and load them dynamically once fancybox is opened. That has the advantage that videos are not present in the DOM until they are required. Also you can use a single script for multiple videos so :

<a href="path/video01.mp4" class="fancybox">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox">Click here to start movie no 2</a>

To make things more flexible, each video could have its own dimensions (video may not have the same size always) passing its height and width using the (HTML5) data-* attribute like :

<a href="path/video01.mp4" class="fancybox" data-width="352" data-height="270">Click here to start movie no 1</a>
<a href="path/video02.mp4" class="fancybox" data-width="640" data-height="360">Click here to start movie no 2</a>

Then use this single script :

$(document).ready(function () {
  $(".fancybox").fancybox({
    fitToView: false, // to show videos in their own size
    content: '<span></span>', // create temp content
    scrolling: 'no', // don't show scrolling bars in fancybox
    afterLoad: function () {
      // get dimensions from data attributes
      var $width = $(this.element).data('width'); 
      var $height = $(this.element).data('height');
      // replace temp content
      this.content = "<embed src='pathToPlayer/jwplayer.swf?file=" + this.href + "&autostart=true&amp;wmode=opaque' type='application/x-shockwave-flash' width='" + $width + "' height='" + $height + "'></embed>"; 
    }
  });
}); // ready

See DEMO