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>

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
– jacwah, Commented Nov 1, 2016 at 10:56

Community · Accepted Answer · 2017-05-23 12:41:01Z

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.

Stack Exchange Network

Responsive video embedding

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Responsive video embedding

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions