tip/theme/static/css/peertube.css

*
 * Responsive design style sheet for pelican PeerTube 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="peertube peertube-16x9">
 *     <iframe src="https://your.peertube.instance/embed/VIDEO_ID" allowfullscreen seamless frameborder="0"></iframe>
 * </div>
 *
 * (c) 2018 David Douard <david.douard@sdfa3.org>, license: MIT
 */

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