Posted By

thewickedchemist on 02/12/12


Tagged

css video mobile fluid elastic responsive


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

rmurillo020
obear
ruijscosta


Elastic Videos for Responsive Design


 / Published in: CSS
 

URL: http://www.pixeltweaks.com

Originally from: http://webdesignerwall.com/tutorials/css-elastic-videos

  1. .video-container {
  2. position: relative;
  3. padding-bottom: 56.25%;
  4. padding-top: 30px;
  5. height: 0;
  6. overflow: hidden;
  7. }
  8.  
  9. .video-container iframe,
  10. .video-container object,
  11. .video-container embed {
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. width: 100%;
  16. height: 100%;
  17. }
  18.  
  19.  
  20. HTML USAGE:
  21.  
  22. <div class="video-container">
  23. <iframe width="853" height="510" src="http://www.youtube.com/embed/3R2cnxz27LI" frameborder="0" ></iframe>
  24. </div>

Report this snippet  

You need to login to post a comment.