Вы, вероятно, используете неподвижное изображение в качестве фона для своего веб-сайта, но он может предложить более богатый и впечатляющий опыт, если вы можете рассмотреть возможность размещения движущихся изображений, таких как анимация или автоматически воспроизводимый видеоклип, в фоновом режиме своих веб-страниц.
На домашней странице Bing часто используются видео-фоны, например, пингвины, выскакивающие из проруби один за другим, и для встраивания видеофонов в ваши веб-страницы требуется несколько строк кода.

Здесь есть несколько подходов:

• Bing использует стандартные теги HTML5 для показа видео на главной странице. Встроенное видео имеет фиксированный размер, и его размер не изменяется в браузере.
• Существуют готовые к использованию плагины jQuery, например Tubular и BigVideo.js, которые позволяют легко использовать любое видео. или серию видео в качестве фона страницы.
• Другой, более простой подход, как вы можете видеть в этой демонстрации, использует теги HTML и CSS (без JavaScript), чтобы помочь вам разместить любое видео YouTube в фон страницы.

Фоны видео Youtube

Для начала просто вставьте приведенный ниже код рядом с открывающим тегом вашего веб-шаблона. Вам также следует заменить идентификатор фактическим идентификатором видео YouTube, которое вы хотите использовать в фоновом режиме.
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
iframe>
div>
// Replace ID with the actual ID of your YouTube video
Мы используем теги IFRAME YouTube для встраивания этого видео так, чтобы оно занимало всю страницу (для ширины и высоты установлено значение 100%). Кроме того, z-index имеет отрицательное значение, поэтому слой видео YouTube будет отображаться на несколько уровней ниже основного содержания вашей страницы.
Недостатком является то, что ваше фоновое видео не будет работать на мобильных устройствах, и невозможно отключить звук видео без использования JavaScript.

Вставить фоновую музыку с YouTube Audio

Вспомните эпоху Geocities, когда веб-сайты автоматически воспроизводили фоновую музыку, как только вы их открывали, к смущению офисных работников. В основном они использовали необработанные аудиофайлы, такие как MP3, WAV или даже формат MIDI, для встраивания музыки, но вы даже можете использовать любой из ваших любимых треков YouTube для встраивания фонового звука.
Хитрость заключается в том, что вы вставляете обычное видео YouTube (с autoplay=1) и устанавливаете высоту и ширину видеопроигрывателя равными нулю, чтобы встроенный элемент IFRAME оставался невидимым. Этого можно добиться с помощью одной строчки кода, которую можно добавить в любом месте своей веб-страницы.