Responsive YouTube videos

responsive_youTube.html

<!-- Adapted from http://avexdesigns.com/responsive-youtube-embed/ -->

<style>
  
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  
</style>

<div class="video-container">
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

scripts.js

/*If you are creating a dynamic video system, you may need to dynamically wrap the iframe with the div above, like so:*/

jQuery(document).ready(function($) {
  
  $('iframe').wrap('<div class="video-container" />');

});

/*Note that this will wrap all iFrames, it would be better to give your emedded youTube videos a custom class, but this simple trick will work if you don't have many iFrames... You really shouldn't*/