Advanced Search

Responsive Video

/ Published in: CSS
Save to your folder(s)
This responsive video CSS trick was discovered by tjkdesign.com. I've blogged about it before, you may read the details here. It makes the video embed to expand fullwidth to the boundary.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .video {
  2. 	position: relative;
  3. 	padding-bottom: 56.25%;
  4. 	height: 0;
  5. 	overflow: hidden;
  6. }
  7.  
  8. .video iframe,  
  9. .video object,  
  10. .video embed {
  11. 	position: absolute;
  12. 	top: 0;
  13. 	left: 0;
  14. 	width: 100%;
  15. 	height: 100%;
  16. }

URL: http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.