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

Avatar michael.anlauf Support asked

Tutorial of full width video in an element.

This does not work for using as background with transparent navbar!
Take a look at my example on the bottom.

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


2 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.

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