Fancybox, play a youtube video with start time and autoplay

2
votes

I'm using Fancybox to play a youtube video. Works as expected. Video pops up and plays great. However, I would like to use both AUTOPLAY and Start Time when my video is clicked.

Here is the URL I'm trying.

http://www.youtube.com/watch?v=BwaKZ4r5fQM&autoplay=1&t=0m47s

Autoplay works fine, but the start time is ignored.

Any suggestions?

Thanks!

1
javascriptjqueryhtmlyoutubefancybox

1 Answers

2
votes

The easiest way to do is using fancybox media helpers so

1). Load the fancybox media helper js file :

<script type="text/javascript" src="{your correct path}/helpers/jquery.fancybox-media.js"></script>

2). Only set your youtube URL without any parameter like :

<a class="fancybox" href="http://www.youtube.com/watch?v=BwaKZ4r5fQM">Start YouTube in fancybox at 47 secs</a>

3). Enable the media helper in your fancybox custom initialization script and pass the youtube parameters using this format :

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        helpers: {
            media: true
        },
        youtube: {
            autoplay: 1, // enable autoplay
            start: 47 // set start time in seconds (embed)
        }
    }); // fancybox
}); // ready

NOTE : the media helper will convert the video URL in its embed format like :

http://www.youtube.com/embed/BwaKZ4r5fQM

... where the parameter t={mm}m{ss}s is not longer valid.

With youtube embedded player you can select the start time using the start parameter followed by the number in seconds of the wanted starting time (as we did in the fancybox initialization script)

JSFIDDLE