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
Post a Comment