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

• 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. – jacwah Nov 1 '16 at 10:56

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">
</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 */
}