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%;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2020 Jakob Helmer - Powered by WordPress - @trails&tribulations