Responsive video embedding I figured out a alternative way to make embedded videos responsive and I like to have some feedback on it.

Would this be considered a hack or just bad coding to add a extra piece of html to make this work?



.video-wrapper {
  position: relative;
}
.make-video-responsive-img {
  width: 100%;
  height: auto;
  display: block;
}
.video-wrapper iframe, 
.video-wrapper object,
.video-wrapper embed,
.video-wrapper video {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top:0;
  z-index:1;
}
&lt;h2&gt;Vimeo Responsive with base64 img&lt;/h2&gt;
&lt;div class="video-wrapper"&gt;
 &lt;img class="make-video-responsive-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAABLCAYAAAC1D//7AAAABGdBTUEAALGPC/xhBQAAAU1JREFUeAHt0rENwDAMBDHF+++cpHAj4EagARf68sBnZt7/ewqsAmddDgVuATBQyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4Es8AFyOgGVosq9uwAAAABJRU5ErkJggg=="&gt; 
 &lt;iframe src="https://player.vimeo.com/video/184253111" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;
There is no need to use an image to give the wrapper the neccesary height to contain the responsive video. I loaded the image in my browser and found that its dimensions are 75*134, using this we can set the height of the wrapper with a little trick.

HTML code:
    
      
    

&lt;div class="video-wrapper"&gt;   
  &lt;iframe       src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fdespeld%2Fvideos%2F10153995755598412%2F&amp;show_text=0&amp;width=560" width="670" height="375" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"&gt;&lt;/iframe&gt;
&lt;/div&gt;


CSS code:

.video-wrapper {
  position: relative;
}
.video-wrapper::after
{
  content : ' ';
  display : block;
  padding-top: 55%; /* 100*75/134 % proportional to the width of the parent */
}
.video-wrapper iframe, 
.video-wrapper object,
.video-wrapper embed,
.video-wrapper video {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top:0;
  z-index:1; /* there is no need of this z-index property */
}


If you need more information about this "trick", refer to this post: https://stackoverflow.com/questions/22673008/css-make-div-width-proportional-to-height

If you know the correct proportion, you'll be able to make it responsive.

And no, there is no problem, it's your layout ;)

Regards.