fiddle :https://codepen.io/anon/pen/ZyLqPd
摆弄 YTVideos:https://codepen.io/anon/pen/KqXavy?editors=0100
http://www.seanmccambridge.com/tubular/ https://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html
是否有库可以轻松地将背景 YouTube 视频添加到 div 中?
我搜索了一遍又一遍,却没有找到任何东西。
本质上,我想播放 YouTube 视频作为包含此屏幕截图中的图像的 div 的背景。
$('.canvas .box').YTPlayer({
fitToBackground: true,
videoId: '-JlcxL2ux_A'
});
最佳答案
在你的模型中,视频具有正常的 16:9 宽高比,所以这就是我所使用的,而不是你最初拥有的正方形。以下是调整:
https://codepen.io/saetia/full/BZwWdx/
视频盒
<div class="ib box">
<div class="responsive"><iframe src="https://www.youtube.com/embed/8nH-49PgKdw?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe></div>
</div>
样式
.canvas .box {
display: inline-block;
width: 25%;
pointer-events: none;
}
.canvas .box .responsive {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
.canvas .box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
关于jquery - 自动播放 YouTube 视频背景图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44613749/