Posted By

gorillaagent on 02/08/14


Tagged

iframe css embed vimeo YouTube videos responsive


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

gorillaagent


CSS Responsive Videos


 / Published in: CSS
 

URL: http://gorillaadvertising.net/2014/02/07/pure-css-responsive-videos/

Make the Youtube videos, vimeo videos and others that use iframe, object or embed responsive and fit any browser size.

  1. .video-responsive {
  2. position: relative;
  3. padding-bottom: 56.25%;
  4. padding-top: 30px;
  5. height: 0;
  6. overflow:
  7. hidden;
  8. }
  9.  
  10. .video-responsive iframe, .video-responsive object, .video-responsive embed {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. }
  17.  
  18. <!-- Markup begins - put the above css in your stylesheet -->
  19.  
  20. <div class="video-responsive">
  21. <iframe width="1280" height="720" src="//www.youtube.com/embed/ZPGxSeOtcvA?rel=0" frameborder="0" allowfullscreen></iframe>
  22. </div>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: gorillaagent on February 19, 2014

Works for Google paps too :)

You need to login to post a comment.