自动播放的YouTube视频的背景瓷砖

Question

小提琴：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' 
}); 

Answer 1

在样机

的影片有一个正常的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%; 
}