autoodtwarzania YouTube wideo w tle Płytki

Question

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

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

Czy istnieją biblioteki, które obecnie nie łatwo włączyć dodawanie tła youtube film do div?

Szukałem raz po raz i nie mogłem niczego znaleźć.

Zasadniczo chcę odtwarzać wideo z YouTube jako tło dla elementów div z obrazami na tym zrzucie ekranu.

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

Answer 1

w swojej makiety filmy mają normalny 16: 9 proporcje, więc to co ja poszedłem z zamiast kwadratów początkowo mieli. oto szczypie:

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

pudełka wideo

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

Style

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