css 响应youtube视频

Posted 2021-05-13

<div class="rwd-video">
	<iframe src="//www.youtube.com/embed/-lmlmt1Omew?rel=0" allowfullscreen="" frameborder="0" height="315" width="560">
	</iframe>
</div>

.rwd-video {
	height: 0;
	overflow: hidden;
	/* ratio: 9 / 16 = 0,5625 */
	padding-bottom: 56.25%;
	/* ratio: 3 / 4 = 0.7500 */
	padding-bottom: 75%;
	/* Padding for video controls */
	padding-top: 30px;
	position: relative;
}
.rwd-video iframe,
.rwd-video object,
.rwd-video embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}