Docs

[jakejauhari]

Hi guys,
I have one last thing to sort out on my site.
I’m trying to get rid of the black bars at the top and bottom of my embedded videos.
The videos are hosted at Vimeo https://vimeo.com/131087999

The embed code I am using is:
<iframe src=”https://player.vimeo.com/video/131087999?autoplay=1&title=0&byline=0&portrait=0&#8243; width=”1600″ height=”650″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Any help with removing the black bars will be greatly appreciated!
Cheers,
Jake

[Paul R]

Hi Jake,

Please replace your code with this.

<iframe src="https://player.vimeo.com/video/131087999?autoplay=1&title=0&byline=0&portrait=0" width="1200" height="487" style="width:1200px;height:487px;" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Then add the code below under Custom > CSS in the Customizer.

body .x-video .x-video-inner { 
    padding-bottom: 0;
    height: auto;
}

body .x-video .x-video-inner iframe {
    position:static; 
}

Hope that helps.

[jakejauhari]

Hi guys,
Thanks for your help with this.
I’ve added these two items but unfortunately the black bars remain.
http://staging.brionycroft.com.au/video-test/
Is there anything else we can try to lose the black bars?
Cheers and thanks,
Jake

[jmacreations]

I have just looked at your site and if you change your iframe embed code style to be height:350px then it works for me. The black bars are becuase its fitting to video into a different sized iframe. In future if you set your iframe/embed to be the correct proportions you wont get the black bars.

[Lely]

Thank you for helping @jmacreations!

@jakejauhari,
Please remove this style=”width:1200px;height:487px;” from your iframe code and the result would be this:

Hope this helps.

[Author]

Posts