javascriptjquerycssfeatherlight.js

Featherlight.js plugin: lightbox's width issue when content is an iframe

Using Featherlight jQuery plugin and setting text as the content of my lightbox, my lightbox's width is about 80% of the screen. But if I replace the text by a YouTube iframe, the lightbox's width is reduced to 500px or so, cropping the video.

Code:

<a id='open_lightbox' data-featherlight='.lightbox_content' href='#'>open lightbox</a>
<div class='lightbox_content'>
    <iframe width="1280" height="720" src="https://www.youtube.com/embed/g7fbe-oV-X0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

I tried to use the jQuery binding method too:

$( '#open_lightbox' ).featherlight(
    {
        iframe: 'https://www.youtube.com/embed/g7fbe-oV-X0?rel=0', 
        iframeWidth: 1200,
        iframeHeight: 800
    }
);

Same problem.

(also there are thin white horizontal bands above and below the video, I don't understand why)

Solution

  • To remove the background white color

    add background: none; to featherlight-content div

    To change the width use '!important`

    style="width: 600px !important;