<html>
<head>
<title>Scale YouTube iframe with CSS</title>
<style type="text/css">
#Media { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0;}
#Media iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#Article { max-width: 672px; margin-bottom: 20px; display: block; font-size: 16px; line-height: 23px;}
@media screen and (max-width: 727px) {
#Article { max-width: 640px; min-width: 320px; margin-bottom: 20px; display: block; font-size: 16px; line-height: 23px;}
}
</style>
</head>
<body>
<div id="Article">
<div id="Media">
<iframe width="640" height="360" src="http://www.youtube.com/embed/ADTw-EmfjoE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>
Comments