Как на YouTube вставлять видео?

Question

Я пытаюсь установить видео на YouTube в качестве фона, я застреваю с установкой ширины видео на весь экран. Как вы увидите изображение ниже, видео показывается в центре iframe и не растягивается на весь экран.

/ черные полосы слева и справа видео /

Вот мой код:

#myVideo {
 position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
   width: 100vw; /*now it is 100% of viewport (window) width.*/
   display: inline-block;
  min-height: 100%;
  z-index: -99;

}

<div id="myVideo" >
	<iframe width="100%" height="300px;" src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
	</div>

Answer 1

Сначала поместите ваш div в другой элемент div, который будет иметь фиксированную позицию.
Затем вы устанавливаете CSS для элемента myVideo и iframe, используя абсолютную позицию и полную высоту / ширину для Оба.

Наконец, чтобы это работало, вам нужно несколько медиа-запросов, основанных на соотношении сторон, после и до 16/9, чтобы правильно расположить его. Вы также можете проверить различные свойства позиции.

.video-wrapper {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#myVideo, .video-wrapper iframe {
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myVideo { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #myVideo { width: 300%; left: -100%; }
}

<div class="video-wrapper">
  <div id="myVideo" >
    <iframe src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
  </div>
</div>

Answer 2

Это потому, что YouTube поддерживает пропорции. Если вы хотите, чтобы он занимал всю ширину страницы, вам также следует увеличить высоту.