CODEWITHSUNDEEP
jqueryhtmlyoutubefancyboxfancybox-2
user2105885
user2105885

Reputation: 149

Modify href property (in this JSFiddle ) to work with youtube videos in Fancybox

Since upgrading from Fancybox 1.3.4 to Fancybox 2.1.4 i haven't been able to get the correct href property to work with my youtube videos.

Please take a look at this working jsfiddle that I am trying to modify.

Simply, all I want to do is remove the trailing &autoplay=1 from the URL of each link and add it to the href property inside the script. When I attempt to do so, fancybox opens but the youtube video doesn't play and reports a general error.

Can someone help me to modify this code into a working version ?

Here is the html :

<a href="http://www.youtube.com/watch?v=opj24KnzrWo&amp;autoplay=1">open youtube video</a>

<br />

<a href="http://www.youtube.com/watch?v=071KqJu7WVo&amp;autoplay=1">open youtube video 2</a>

and the javascript:

(function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        // convert youtube swf href to embed for iframe
        var thisHref = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/').replace(new RegExp("&", "i"), '?');
        // bind fancybox to each anchor
        $(this).fancybox({
        "padding": 0,
        "type": 'iframe',
        // add trailing parameters to href (wmode)
        "href" : thisHref+"&amp;wmode=opaque"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);`

Thanks.

Upvotes: 0

Views: 1720

Answers (1)

JFK
JFK

Reputation: 41143

For this type of links without any trailing parameters :

<a href="http://www.youtube.com/watch?v=opj24KnzrWo">open youtube video</a>
<a href="http://www.youtube.com/watch?v=071KqJu7WVo">open youtube video 2</a>

Use this code

(function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        // convert youtube swf href to embed for iframe
        var thisHref = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/');
        // bind fancybox to each anchor
        $(this).fancybox({
            "padding": 0,
            "type": 'iframe',
            // add trailing parameters to href (wmode) AND autoplay    
            "href" : thisHref+"?wmode=opaque&amp;autoplay=1"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);

The issue you had with the previous example is that wmode=opaque was your second parameter so it needed a preceding &amp; 

"href" : thisHref+"&amp;wmode=opaque"

but since you are removing all trailing parameters from the link, then wmode=opaque becomes the first parameter so it needs a preceding ? instead 

"href" : thisHref+"?wmode=opaque&amp;autoplay=1"

See new JSFIDDLE

Upvotes: 0

Related Questions