JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<head class="no-js">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Bonzai Rush</title>
</head>
<body>
<h1>Don’t get smashed!</h1>
<div class="container">
<div class="video">
<iframe width="960" height="750" src="http://www.youtube.com/embed/5nmOMo4OPi4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</body>
CSS
body {
padding: 20px;
margin: 0;
}
.container {
max-width: 300px;
background-color: #eee;
}
/*
Fluid images
and fallback for embedded media when there's no JavaScript
Adapted from:
http://unstoppablerobotninja.com/entry/fluid-images/
*/
img,
.no-js embed,
.no-js object,
.no-js iframe,
video {
max-width: 100% !important;
display: block;
}
/*
Intrinsic ratios for videos
Adapted from:
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
*/
.vid-container {
position: relative;
padding-top: 35px; /* little extra for the player's chrome (esp YouTube) */
}
.vid-container iframe, .vid-container embed, .vid-container object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
JavaScript
$('html').removeClass('no-js').addClass('js');
$('object, embed, iframe').each(function(){
//cache the video
var vid = $(this),
//get its width
vid_width = vid.width(),
//get the width of its container
vid_parent_width = vid.parent().width();
//only if the video is breaking out of its parent...
if (vid_width > vid_parent_width) {
//get its height
var vid_height = vid.height(),
//calculate the aspect ratio as a %
vid_aspect = vid_height/vid_width * 100 + "%";
//wrap the video in our div.vid-container
vid.wrap('<div class="vid-container">');
//set the padding to the aspect ratio as a percentage
//vid.parent() is now the div.vid-container
vid.parent().css('padding-bottom', vid_aspect);
}
});