Как использовать видео YouTube в качестве фона веб-страницы

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

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

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

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

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

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

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

<div style = "position: fixed; z-index: -99; ширина: 100%; высота: 100%"> <iframe frameborder = "0" height = "100%" width = "100%" src = "https : //youtube.com/embed/ID? autoplay = 1 & controls = 0 & showinfo = 0 & autohide = 1 "> </ iframe> </ div> // Замените идентификатор фактическим идентификатором вашего видео на YouTube

Внутренне мы используем теги YouTube IFRAME для встраивания этого видео таким образом, чтобы оно занимало всю страницу (ширина и высота установлены на 100%). Кроме того, для z-индекса установлено отрицательное значение, поэтому видеослой YouTube будет отображаться на несколько уровней ниже основного содержимого вашей страницы.

Недостатком является то, что фоновое видео не будет работать на мобильных устройствах, и невозможно отключить звук видео без использования JavaScript.

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

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

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

<embed height = "0" width = "0" src = "http://youtube.googleapis.com/v/VIDEO_ID&autoplay=1&loop=1" />

Com/embed/ID?