Remove black bars from Video Embedded – Themeco Community

Remove black bars from Video Embedded

jakejauhari — Fri, 03 Jul 2015 00:21:30 +0000

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:
https://player.vimeo.com/video/131087999?autoplay=1&title=0&byline=0&portrait=0″ width=”1600″ height=”650″ frameborder=”0″ allowfullscreen=”allowfullscreen”>

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

Reply To: Remove black bars from Video Embedded

Paul R — Fri, 03 Jul 2015 07:48:28 +0000

Hi Jake,

Please replace your code with this.

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.

Reply To: Remove black bars from Video Embedded

jakejauhari — Mon, 06 Jul 2015 01:05:30 +0000

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

Reply To: Remove black bars from Video Embedded

jmacreations — Mon, 06 Jul 2015 01:51:57 +0000

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.

Reply To: Remove black bars from Video Embedded

Lely — Mon, 06 Jul 2015 03:24:29 +0000

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.