youtube.css

/*
 * Responsive design style sheet for pelican YouTube integration.
 * Makes the video as wide as possible, keeping a specified aspect ratio
 * of the video (e.g. 4:3, 16:9, etc. for width vs height).  The video
 * will resize and shrink as you resize the browser window.  Enjoy!
 *
 * Integrate these definitions into your project style sheet, and use as
 *
 * <div class="youtube youtube-16x9">
 *     <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen seamless frameborder="0"></iframe>
 * </div>
 *
 * (c) 2015 Peter Bittner <django@bittner.it>, license: MIT
 */

.youtube-4x3 {
	padding-bottom: 75%;  /* inverse of 4:3 aspect ratio */
}
.youtube-16x9 {
	padding-bottom: 56.25%;  /* inverse of 16:9 aspect ratio */
}
.youtube-4x3,
.youtube-16x9 {
	position: relative;
	height: 0;
	overflow: hidden;
}
.youtube-4x3 iframe,
.youtube-16x9 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}