我想将 YouTube 视频嵌入到网站中。
该视频的最小分辨率为 256 × 144 像素,最大分辨率为 1280 x 720 像素。
我想将嵌入的视频限制为上述给定的分辨率。
我已经找到了动态 YouTube 嵌入的示例,但其中一些只有最小宽度,如果我将浏览器大小增加到 1280 像素宽度以上,视频会随之扩展。
我试图添加一个 max-width 参数,但是当我调整浏览器的大小时,高度不会在此之后调整,并且视频在顶部和底部被截断。它看起来像 64:9 而不是 16:9 的纵横比。
还有一些示例将我的视频裁剪为 4:3 的纵横比,这看起来很糟糕。
这是我找到的例子
CSS:
.video-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<div class="video-container">
<embed src="youtube code"></embed>
</div>
Run Code Online (Sandbox Code Playgroud)