html5 - How do I get my embedded YouTube iframes to scale? -


my website looks great... until change resolutions or browsers, , youtube videos comically out of proportion. else scales , can't them scale @ all. tried setting them percentage scale nearest container (video), refuses scale in height percentage.

<aside id="video"> <iframe src="https://www.youtube.com/embed/-i3mx0yrrjm" width="320" height="190"></iframe> </aside>  #video { margin: auto; width:320px; height:190px; box-shadow: 15px 15px 10px rgba(0,0,0,0.8); } 

<div id="container"> <aside id="video"> <iframe src="https://www.youtube.com/embed/-i3mx0yrrjm" width="320" height="190"></iframe> </aside> </div>  #container { margin:auto; width:50%; }  #video { margin:auto; position: relative; padding-bottom: 56.25%; padding-top: 25px; box-shadow: 15px 15px 10px rgba(0,0,0,0.8); } #video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

just adjust #container width in css adjust size.


Comments

Popular posts from this blog

c# - Unity IoC Lifetime per HttpRequest for UserStore -

Change the color of an oval at click in Java AWT -

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -