Advanced Search

Elastic Videos for Responsive Design

/ Published in: CSS
Save to your folder(s)
Originally from: http://webdesignerwall.com/tutorials/css-elastic-videos

Expand | Embed | Plain Text

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.