3

Using Featherlight jQuery plugin and setting text as the content of my lightbox, my lightbox's width is about 80% of the screen: http://goo.gl/4BVzHM. 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)

drake035
  • 3,955
  • 41
  • 119
  • 229

1 Answers1

0

To remove the background white color

add background: none; to featherlight-content div

To change the width use '!important`

style="width: 600px !important;
mntl_
  • 358
  • 4
  • 11