Skip to content Skip to sidebar Skip to footer

JQuery FancyBox With IFrame Issue (PHP)

Hi I am trying to use FancyBox in a page I am making containing videos, Like a Gallery of videos, my intention is to be linking YouTube videos in. The issue I get is it just links

Solution 1:

You have two (none PHP related) issues :

1). This youtube format :

https://www.youtube.com/watch?v=DB7jsjt4Uec 

.... is not supported inside an iframe because most likely it contains a DENY X-Frame-options response header. You may need to convert it into an embed format like :

https://www.youtube.com/embed/DB7jsjt4Uec 

2). The special class fancybox.iframe is only supported in fancybox v2.x but you seem to be using fancybox v1.3.x. So you rather use the class iframe or add the API option

type: "iframe"

... to your custom fancybox initialization script.

Since you are pulling the video links from a database, the good news is you don't have to change anything in your PHP code but only in your jQuery code like :

jQuery(document).ready(function ($) {
    $(".fancybox").each(function (i) {
        // change links on the fly to embed format
        this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/') + "?autoplay=1";
    }).fancybox({
        // API options
        type: "iframe" // needed for videos embed format
    });
}); // ready

Notice I am adding ?autoplay=1 to the new href but that's optional if you want your videos autoplay once in fancybox's iframe.

JSFIDDLE


Post a Comment for "JQuery FancyBox With IFrame Issue (PHP)"