responsive styling for iframes and videos

Some css magic for creating responsive videos and iframes:

/* responsive styling for videos: */
video {
	width: 100%    !important;
	height: auto   !important;
}
/* responsive styling for iframes: */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	margin: 15px 0;
	height: 0;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 100%;
	height: 100%;
}

Author: Jakob

Wordpress & bicycle enthusiast

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *