Snippets

Responsive videos

This code makes the video embed to expand fullwidth to the boundary.

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Source: http://webdesignerwall.com/tutorials/5-useful-css-tricks-for...

Share this snippet

 
  • http://lamecarlate.net AkaiKen

    Great snippet!
    What does the “padding-bottom: 56.25%;” mean here?