Elastic Videos for Responsive Design


/ Published in: CSS
Save to your folder(s)

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


Copy this code and paste it in your HTML
  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>

URL: http://www.pixeltweaks.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.