Responsive video embedding

Question

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;
}

<h2>Vimeo Responsive with base64 img</h2>
<div class="video-wrapper">
 <img class="make-video-responsive-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAABLCAYAAAC1D//7AAAABGdBTUEAALGPC/xhBQAAAU1JREFUeAHt0rENwDAMBDHF+++cpHAj4EagARf68sBnZt7/ewqsAmddDgVuATBQyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4EsAEZmMYLBQBYAI7MYwWAgC4CRWYxgMJAFwMgsRjAYyAJgZBYjGAxkATAyixEMBrIAGJnFCAYDWQCMzGIEg4Es8AFyOgGVosq9uwAAAABJRU5ErkJggg=="> 
 <iframe src="https://player.vimeo.com/video/184253111" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

• jacwah: Did you just encode a png image in html? I don't know much about web technologies, but that can't be a good idea.

Answer 1

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:

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

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.