如何使嵌入的 YouTube 视频变得响应式?
如何在 YouTube 网站上插入响应式视频?
来自 YouTube 的视频需要插入到从 YouTube 复制的成品帧一侧的 HTML 代码中,该视频不具有自适应性。 为了使此类视频具有自适应性,以便在不同显示器和小工具上的屏幕分辨率发生变化时它也会发生变化,有必要使用额外的 CSS 来设置来自 YouTube 的此类视频帧的样式。
对 YouTube 视频帧进行风格化的示例
.videowrap {
最大宽度:720px;
边距:0 自动;
}
.视频块 {
位置:相对;
内边距底部:56.25%; /*观看视频,时间为 16:9*/
高度:0;
溢出:隐藏;
}
.videoblock iframe,对象,嵌入 {
位置:绝对;
顶部:0;
左:0;
宽度:100%;
高度:100%;
边框:0;
}
插入来自 YouTube 的视频帧的示例
<h1>视频标题</h1>
<div class="videowrap">
<div class="videoblock">
<iframe width="560" height="315" src="https://www.youtube.com/embed/FjM1dT2_JcE" allowfullscreen></iframe>
</div>
</div>
自己尝试一下»笔记。 填充底值:56.25%; - vikorystvaetsya 播放 16:9 视频时。 如果视频的相关面不同,那么值就会改变。 计算公式为 9/16*100% = 56.25%。 如果视频边长为 4:3,则您将得到 3/4*100% = 75%。