Автовоспроизведение видеоизображений видеоизображения на YouTube

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

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

Существуют ли библиотеки, которые легко позволяют добавлять фоновое видео с YouTube в div?

Я искал снова и снова и ничего не мог найти.

По сути, я хочу воспроизвести видеоролик YouTube в качестве фона для разделов с изображениями на этом скриншоте.

введите описание изображения здесь

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

Ответы

Ответ 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%;
}