Search code examples
jqueryiframeyoutubefancyboxfullscreen

youtube vudeos inside fancybox iframe popup with fullscreen mode

I am having an issue with youtube fullscrenn mode when it's inside an iframe fancybox popup. I am using wordpress + easy fancybox plugin

I have homepage and special page called "videos" which shows when clicking on a button in the homepage which opens an iframe popup and displaying hte "videos" page inside that iframe.

it works fine but it disables the "fullscreen" option enter image description here

when I oprn the page regularly from within the wordpress admin in a separate browsers it works just fine. enter image description here

I understand it happens because I am trying to open it from within an iframe. is there any solution to that? Thanks

Solution

  • The easy fancybox plugin uses fancybox v1.3.4 and the fullscreen option is disabled because the (fancybox) iframe doesn't have the allowfullscreen attribute.

    You may need to add it using the onComplete callback like:

    onComplete : function () {
    $("#fancybox-frame").attr("allowfullscreen", "allowfullscreen")
}

    You may need to ask the plugin's author how to do that https://wordpress.org/support/plugin/easy-fancybox

    I am assuming you are calling your video using the URL embed format like:

    <a class="fancybox" href="http://www.youtube.com/embed/SvKmSNxFHyQ">open youtube iframe</a>

    and setting fancybox type as iframe

    See DEMO with fullscreen enabled/disabled with this method.