YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar michael.anlauf Support asked

Tutorial of full width responsive video in an element.

This does not work for using as background with transparent navbar!

I use the iframe like

<div class="embed-container">  
<iframe src="https://player.vimeo.com/video/180044758" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

in a text element.
Then you have to add this css rules

.embed-container {  
  position: relative;   
  padding-bottom: 56.25%; /* ratio 16x9 */  
  height: 0;   
  overflow: hidden;   
  width: 100%;  
  height: auto;  
.embed-container iframe {  
  position: absolute;   
  top: 0;   
  left: 0;   
  width: 100%;   
  height: 100%;   

to custom code. Take attention to the ratio of your movie!
In theory you have only to replace your video id.
Works with Youtube as well.

Regards, Michael tucfoto
Slideshow design

  • Tutorial
  • YOOtheme Pro


3 Answers


Avatar michael.anlauf Support answered

You're welcome! This trick avoids the black bars left and right on larger screens or when you use videos of lower resolution.


Avatar albert.moreno.forrellad answered

Now the only point is how to put this code on the header for initial full width video with the menu light over it !

Know someone who can answer? Share a link to this question via email or twitter.