How to make the embed Youtube player responsive using Drupal

Many Drupal modules such as Media: YouTube or Video Embed Field offer a very easy way to integrate the embed Youtube player as field. In a time where responsive design has become a must, it is quite surprising that they all don't offer any responsiveness. Furthermore most of the free and paid themes who integrate Youtube/Vimeo apparently also don't consider this aspect. But with a small twist you can easily fix it yourself. With the following CSS and HTML code you can make your embed Youtube player responsive.

Important Note: If you use views with fields for the integration, you can just add the CSS code and then assign the class video-container to the Youtube field (Customize field HTML > Create a CSS class). If you want to add the class to fields of content types, you can for instance use the module Field Formatter Class.

For more information see: http://avexdesigns.com/responsive-youtube-embed/
For the customization of the Youtube player: https://developers.google.com/youtube/player_parameters
Alternatively you may consider: https://www.drupal.org/project/fitvids

CSS

.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%;
} 

HTML

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

Example