ऑटोप्ले यूट्यूब वीडियो पृष्ठभूमि टाइलें

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

वहाँ पुस्तकालयों वहाँ एक div करने के लिए एक पृष्ठभूमि यूट्यूब वीडियो जोड़ने सक्षम है कि आसानी से कर रहे हैं कर रहे हैं?

मैंने खोज की है और कुछ भी नहीं मिला है और कुछ भी नहीं मिला।

अनिवार्य रूप से मैं इस स्क्रीनशॉट में छवियों के साथ divs के लिए पृष्ठभूमि के रूप में एक YouTube वीडियो खेलना चाहता हूं। तो क्या मैं बजाय चौकोर आप शुरू में था के साथ चला गया है कि, 9 पहलू अनुपात:

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

Answer 1

अपने mockup में

वीडियो एक सामान्य 16 की है। आप बहुत संभावना इस संशोधित कर आप क्या कर रहे हैं के बाद क्या करना

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