gạch nền Autoplay YouTube Video

Question

Fiddle: https://codepen.io/anon/pen/ZyLqPd
Fiddle với YTVideos: https://codepen.io/anon/pen/KqXavy?editors=0100

http://www.seanmccambridge.com/tubular/ https://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html

Có phải có thư viện ra khỏi đó mà dễ dàng kích hoạt thêm một youtube video nền cho một div?

Tôi đã tìm kiếm nhiều lần và không thể tìm thấy bất kỳ thứ gì.

Về bản chất tôi muốn phát video trên YouTube làm nền cho các div với hình ảnh trong ảnh chụp màn hình này.

$('.canvas .box').YTPlayer({ 
    fitToBackground: true, 
    videoId: '-JlcxL2ux_A' 
}); 

Answer 1

trong mockup của bạn các đoạn video có bình thường 16: 9 aspect ratio, vì vậy đó là những gì tôi đã đi với thay vì các hình vuông ban đầu bạn đã có. đây là những tinh chỉnh:

https://codepen.io/saetia/full/BZwWdx/

hộp phim

<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> 

phong cách

.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%; 
}