Responsive YouTube Embed

Public

Makes youtube video embed responsive (resizes accordingly to container width). Credits for this snippet go to John Surdakowski, see more at: http://avexdesigns.com/responsive-youtube-embed.

Get raw version
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. }
Get raw version
html5
  1. <div class="video-container">
  2. <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
  3. </div>