Создание полнофункционального Vimeo Iframe: несколько методов с примерами кода

Чтобы сделать полноэкранный фон Vimeo iframe, вы можете использовать различные методы в зависимости от ваших конкретных требований. Вот несколько подходов с примерами кода:

Метод 1: CSS-фон
Этот метод предполагает размещение iframe Vimeo в качестве фонового элемента и его растягивание на весь экран.

HTML:

<div class="vimeo-wrapper">
  <iframe src="https://player.vimeo.com/video/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.vimeo-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.vimeo-wrapper iframe {
  width: 100%;
  height: 100%;
}

Метод 2: позиционирование CSS
Этот метод позиционирует iframe Vimeo абсолютно и расширяет его, чтобы охватить всю область просмотра.

HTML:

<div class="vimeo-wrapper">
  <iframe src="https://player.vimeo.com/video/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.vimeo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.vimeo-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Метод 3: событие изменения размера JavaScript
Этот метод динамически изменяет размер iframe Vimeo в соответствии с размерами окна браузера.

HTML:

<div class="vimeo-wrapper">
  <iframe id="vimeo-iframe" src="https://player.vimeo.com/video/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

JavaScript:

window.addEventListener('resize', resizeVimeoIframe);
function resizeVimeoIframe() {
  var vimeoIframe = document.getElementById('vimeo-iframe');
  vimeoIframe.style.width = window.innerWidth + 'px';
  vimeoIframe.style.height = window.innerHeight + 'px';
}
// Initial resize
resizeVimeoIframe();

Это всего лишь несколько способов добиться полноценного фонового эффекта iframe Vimeo. Вы можете настраивать и комбинировать эти методы в соответствии со своими потребностями.