We'll use a CSS "padding trick" to maintain the video's aspect ratio as the browser is resized. Add the following to your stylesheet:

.embed-youtube { position: relative; padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */ /* padding-bottom: 62.5%; - 16:10 aspect ratio */ /* padding-bottom: 75%; - 4:3 aspect ratio */ padding-top: 30px; height: 0; overflow: hidden; } .embed-youtube iframe, .embed-youtube object, .embed-youtube embed { border: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Most YouTube videos use an aspect ratio of 16:9; therefore, I recommend using a value of 56.25% for the padding-bottom property, as noted above. To calculate other aspect ratios, simply divide H/W. For example, let's say you have a video with an aspect ratio of 4:3. Dividing 3÷4 equals 0.75, or 75%. Therefore, padding-bottom would be 75% to maintain this aspect ratio.