我想将 YouTube 视频嵌入到网站中。
该视频的最小分辨率为 256 × 144 像素,最大分辨率为 1280 x 720 像素。
我想将嵌入视频限制为上面给定的分辨率。
我已经找到了动态 YouTube 嵌入的示例,但其中一些只有最小宽度,如果我将浏览器尺寸增加到超过 1280 像素宽度,视频就会随之扩展。
我尝试添加最大宽度参数,但是当我调整浏览器大小时,高度在此之后不会调整,并且视频在顶部和底部被切碎。看起来宽高比是 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%;
}
HTML
<div class="video-container">
<embed src="youtube code"></embed>
</div>
我知道这有点晚了,但实现这一目标的一个简单方法是添加<div>
围绕视频容器并给它一个max-width
。这是额外的标记,但它有效。
这是一个演示(使用 SCSS,但想法相同):https://codepen.io/mikejandreau/pen/mLbaQQ
添加包装器<div>
像这样:
<div class="video-wrap">
<div class="video-container">
<iframe src="https://youtube.com/your-video?rel=0"></iframe>
</div>
</div>
您可以使用已有的 CSS,并进行一些小的添加。我一般使用一个<iframe>
嵌入视频时,但下面的 CSS 有一行<embed>
以及。通过增加padding-bottom: 56.25%;
to the .video-container
,您可以保持高度与宽度成比例,在本例中转换为 16:9 的宽高比。
/* Set your aspect ratio */
.video-container {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}
.video-container iframe,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
/* And set the max-width of the parent element */
.video-wrap {
width: 100%;
max-width: 600px;
}
希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)