Automatische Wiedergabe YouTube Video Hintergrund Fliesen

Question

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

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

Gibt es gibt Bibliotheken gibt, die ermöglichen, leicht einen Hintergrund Youtube Video einem div hinzufügen?

Ich habe immer wieder gesucht und konnte nichts finden.

Im Wesentlichen möchte ich ein YouTube-Video als Hintergrund für die divs mit den Bildern in diesem Screenshot spielen.

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

Answer 1

in Ihrem Mockup haben die Videos ein normales 16: 9-Seitenverhältnis, so dass das, was ich mit, statt der Quadrate ging man zunächst hat. hier sind die Tweaks:

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

Video-Boxen

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

Arten

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