Fancybox movie play on www

Question

I need your help. Is it possible to use fancybox as the movie player without youtube? just reading the file on server and displaying it?

thats the script for fancy youtube:

<script>
    $(document).ready(function(){
        $("a.video").click(function() {
            $.fancybox({
                    'padding' : 0,
                    'autoScale' : false,
                    'title' : this.title,
                    'overlayOpacity' : '.6',
                    'overlayColor' : '#333',
                    'transitionIn' : 'none',
                    'transitionOut' : 'none',
                    'centerOnScroll' : false,
                    'showCloseButton' : true,
                    'hideOnOverlayClick': false,
                    'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                    'type' : 'swf',
                    'swf' : {
                    'wmode': 'transparent',
                    'allowfullscreen': 'true'
                    }
            });
            return false;
        });
    });
</script>

• html:

'< a class="video iframe" href="http://www.youtube.com/watch?=Psk2Pq03rv0&fs=1">Arbitrary text < / a>'

can i change it not to use YT but default player?

Answer 1

As a matter of fact, you will always need a player. Fancybox cannot be used as a player "per se", however you may use another player other than the YouTube default player like JWPlayer for instance.

JwPlayer supports to play YouTube videos since v4.x so the following options are valid:

pathToPlayer/jwplayer.swf?file=http://www.youtube.com/watch?v=DdR41fe9Zeg

or

pathToPlayer/jwplayer.swf?file=http://www.youtube.com/v/DdR41fe9Zeg

so you could easily embed youtube videos on your webpages using jwplayer instead of the default youtube player like:

<embed src="pathToPlayer/jwplayer.swf?file=http://www.youtube.com/watch?v=DdR41fe9Zeg" type="application/x-shockwave-flash" width="640" height="376" />

Now, using the same embedding technique mentioned above, you may tweak your fancybox script to use jwplayer to play the youtube video specified in the href of your anchor so:

Using the html:

<a class="video" href="http://www.youtube.com/watch?v=DdR41fe9Zeg" title="test">Arbitrary text</a>

(notice that I removed the class iframe ... it's not needed)

Use the edited script:

<script type="text/javascript">
 $(document).ready(function(){
  $("a.video").click(function() {
   $.fancybox({
    'padding' : 0,
    'autoScale' : false,
    'title' : this.title,
    'overlayOpacity' : '.6',
    'overlayColor' : '#333',
    'transitionIn' : 'none',
    'transitionOut' : 'none',
    'centerOnScroll' : false,
    'showCloseButton' : true,
    'hideOnOverlayClick': false,
    'content': '<embed src="jwplayer.swf?file='+(this.href.replace(new RegExp("watch\\?v=", "i"), "v/"))+'&amp;autostart=true&amp;fs=1" type="application/x-shockwave-flash" width="640" height="376" wmode="opaque" allowfullscreen="true" allowscriptaccess="always"></embed>'

    // don't need the following lines
    /*
    'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
    'type' : 'swf',
    'swf' : {
     'wmode': 'transparent',
     'allowfullscreen': 'true'
    } // swf
    */

   }); // fancybox
   return false;
  }); // click
 }); // ready
</script>

Notice that I am using the API option 'content' instead of 'href' to embed the video into the fancybox, however I am still using the href to convert the URL to its simplified version.

Finally, I am assuming that you are using fancybox v1.3.x because the options you are using so the script will work with that version only.