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

  1. .video-container {
  2. position: relative;
  3. padding-bottom: 56.25%;
  4. padding-top: 30px; height: 0; overflow: hidden;
  5. }
  6.  
  7. .video-container iframe,
  8. .video-container object,
  9. .video-container embed {
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. width: 100%;
  14. height: 100%;
  15. }

HTML

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

Example

Taxonomy: 

Drupal themes to be compared