Valentin Verdegales Valentin Verdegales - 2 months ago 22
CSS Question

Making proportional vimeo iframe

I'm making my first steps learning to code. I've been taken some courses on Internet and now Idecided to continue learning from the experience while I build a Wordpress child theme by myself.

The thing is that I'm using a vimeo iframe in one template.



iframe {

width:70%;
}

<iframe src="https://player.vimeo.com/video/41845276" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>





I like it, it works fine, but I would like to can resize it proportionally and doesn't have a lot of black space around it. To try to always have something like this

enter image description here

and not like this:

enter image description here

For example I see it like this in my iphone and it's not so good because it takes almost all my screen:

enter image description here

Do you have some suggestion?

Thank you very much for your help

Answer

Try this, if you know the real proportion of the video like 16:9 or 4:3 you can use the viewport units to set the size. Like this:

16 : 9
70vw x 39vw

iframe {
  display:block;
  margin:0 auto;
  width:70vw;
  height:39vw;
}
<iframe src="https://player.vimeo.com/video/41845276" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>