自動再生YouTube動画の背景のタイル

Question

フィドル：YTVideosとhttps://codepen.io/anon/pen/ZyLqPd
フィドル：https://codepen.io/anon/pen/KqXavy?editors=0100

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

そこにライブラリがあるしていることを簡単にdiv要素に背景ユーチューブの動画を追加可能に？

何度も何度も検索して何も見つかりませんでした。

基本的に、このスクリーンショットの画像を含むdivの背景としてYouTube動画を再生したいと考えています。あなたのモックアップで

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