自動播放的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%; 
}