Как сделать youtube видео фоном для сайта

Содержание материала:

Видео с YouTube на background сайта во всю ширину и без звука

Доброе утро, дорогие друзья подписчики или будущие подписчики :)) Очень нужно было недавно сделать видео background на одном сайте, и проигрывать видео именно с YouTube. Нашел несколько плагинов, но остановился на решении, основанном на плеере jQuery YTPlayer. Работает во всех браузерах, не сильно тормозит, достаточно простой в установке.

То, что вы можете увидеть в «Демо» и, соответственно, скачать можно назвать почти «Landing Page» с паралаксовым видео бэкграундом. Потому что данный скрипт имеет аж 3 блока:

  • Видео на все разрешение экрана с красивой надписью и кнопкой по середине
  • Текстовое приветствие опять же с кнопкой
  • И низ сайта с какой-то фразой и тремя иконками социальных сетей.

Но это, конечно же, не одностраничный сайт. Это плагин, который наглядно показывает как работает скрипт YTPlayer. Видео всегда остается фиксированным, так что при прокрутке оно остается на месте. Также видео имеет чуть заметный эффект приближения. Видео действительно немного увеличивается с течением времени. Продолжительность видео никак не влияет на подгрузку.

Установка видео с YouTube на background сайта:

Все, что помечено «не обязательно» — не обязательно (Капитан Очевидность 🙂 )

1. Скачиваем с моего сайта архив

2. Заливаем все файлы и папки из архива в корень сайта

3. Подключаем стили

4. Подключаем скрипты

4а. Подключаем красивый шрифт «Lato» (не обязательно)

Если вы хотите, чтобы у Вас был такой же шрифт, как в «демо», то подключаем красивый шрифт «Lato» от Google.

Хотя там нет кириллической раскладки, так что по русски вы им все равно ничего не сможете написать.

4b. Подключаем иконки Font Awesome (не обязательно)

5. Вставляем html код

5а. Если Вам нужно все то, что есть в «демо», то код будет такой: (не обязательно)

Скрипт подключен, теперь на фоне вашего сайта стоит видео с YouTube. Причем без звука, не пугая пользователя. Надеюсь, скрипт пригодится. Всего хорошего.

Скачать (277.52 Kb) Demo Отблагодарить Эрика

Фоновое видео для сайта Youtube Player

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

Большое спасибо за вашу помощь и внимательность к нам!

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

Речь пойдет об одном плагине, написанным одним талантливым разработчиком Matteo Bicocchi, — JQuery Youtube Player. Для ознакомления, в источниках материала, я указал ссылку на GitHub где собственно и находится данный плагин и другие плагины этого разработчика. Главное ознакомитесь с демо версией и обязательно с документацией, которую я конечно подготовил для Вас собственно специально, но может чего то не опишу полноценно.

Подключаем файл стилей demo.css и файл стилей самого плагина jquery.mb.YTPlayer.min.css, библиотеку JQuery и самого скрипта библиотеку jquery.mb.YTPlayer.min.js, а также не забываем про сам скрипт video.js.

После этого можем смело приступать к макету HTML. Особо не придирайтесь к дизайну, я думаю он Вам по любому будет не нужен, так как главное рассмотреть данный плагин и правильно его внедрить в свой сайт. Поэтому я руководствовался простой формулировкой — «больше нужного, меньше не нужного».

И так, первое с чего начнем, так это со вставки пожалуй видео на сайт. Делается это все в div блоке, которому мы присваиваем идентификатор video и задаем специальный атрибут data-property, который содержит специальные свойства для расширения видео. О свойствах поговорим в третьем шаге — > документация.

Если мы вставим просто фоновое видео, это будет смотреться не актуально, ведь нам нужно использовать подобный функционал для привлечения клиентов и вызывать интерес, именно такими свойства и возможностями в дизайне мы сможем получить спрос и отклик на наши услуги. Поэтому на видео, мы можем наложить любую информацию или создать блок, который будет служить каркасом для макета. Для этого создаем div блок с идентификатором customElement и придаем ему необходимые для нас свойства (это уже Вы сами все пропишите, что Вам потребуется).

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

Переходим к более простому шагу и создаем файл стилей demo.css, в котором для нашего примера будут служить подобные свойства и стили.

И самое пожалуй важное тут, добавить стили, которые будут адаптировать наше видео под разрешение экрана устройства.

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

Для нашего примера, я взял картинку из ролика данного сайта LikeWeb.me — Студии дизайна по разработке и продвижению сайтов.

Ну что ж, заключительный шаг, который нам предстоит сделать, так это описать скрипт video.js и немного разобраться в документации и настройке плагина фонового видео для сайта Youtube Player.

На самом деле, код очень простой и пожалуй не требует особых объяснений по сравнению с документацией. В принципе, мы вызываем функцию JQuery с идентификатором video, который взаимосвязан с самим HTML блоком div.

Переходим к документации. Все подробно я описывать не буду, это Вы уже прочитайте на GitHub, а разберем только то, что действительно, нужно и потребуется.

Топ-пост этого месяца:  Что такое Yii и с чего начать

Позволяет вставлять видео ролик с Youtube 3-мя удобными для Вас способами:

  1. Полноценной ссылкой http://www.youtube.com/watch?v=3McNFrqJMZw
  2. Сокращенной ссылкой http://youtu.be/3McNFrqJMZw
  3. Прямой ссылкой 3McNFrqJMZw
Свойство Значение Описание
videoURL 3McNFrqJMZw
containment #customElement Позволяет вставлять сам блок на видео, на котором можно размещать информацию
showControls true, false Позволяет скрывать и показывать панель управления видео роликом (стоп, пауза, перемотка, длительность и т.д.). По умолчанию стоит включенным — true
mute true, false Позволяет включать и отключать звук видео ролика. По умолчанию стоит включенным — true
startAt Позволяет включать видео ролик с любой секунды
opacity 1 Позволяет задавать прозрачность видео ролику
addRaster true, false Позволяет показывать и убирать картинку вначале загрузки видео ролика. По умолчанию стоит выключенным — false
quality default Позволяет задавать качество видео ролика. Стоит по умолчанию — default
stopMovieOnBlur true, false Позволяет при наведении на другой объект, останавливать видео ролик, при обратном наведении на ролик продолжать его демонстрацию
autoPlay true, false Позволяет автоматически запускать видео ролик при загрузка сайта. По умолчанию стоит включенным — true
showYTLogo true, false Позволяет показывать прямую ссылку на оригинальное видео, расположенное на Youtube. По умолчанию стоит включенным — true

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

Видео с ютуба в качестве фона сайта

Всем как всегда доброго здравия и приятного настроения!
В данном материале пойдет речь а том как же нам сделать на своём сайте видео фон с популярном видео хостинг YouTube.

Спонсор данного материала habib который внёс 100р за данный скрипт за что ему отдельное СПАСИБО!

Вобщем больше мне сказать о данном материале нечего я думаю всё и так понятно давайте приступим к установке

Качаем архив и загружаем в папку js его содержимое
затем добавим на нужной страницы перед /head скрипт ниже

Это библиотека jquery и если она у вас подключена то пропустите этот шаг

Теперь подключим сами скрипты на той же странице перед закрывающим тегом /body

Теперь нам нужно весь контент в области body заключить в тег div с : для этого мы вставим после тега body следующий код

Ну и конечно же нам нужно добавить свой видео ролик для этого откройте файл index.js
в любом текстовом редакторе или же через файловый менеджер сайта нажав на значок изменить напротив файла и заменим ид видео смотрим рисунок ниже

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

вставляем их вместо тех что в скрипте и сохраняем естественно если вы редактировали скрипт не через ФМ то вам нужно перезолить скрипт с новыми данными на свой сайт

Как сделать видео в качестве фона сайта

В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (video background). Видео в качестве фона страницы можно сделать только с помощью HTML5. Для этого мы:

  • Используем тег video на HTML-странице;
  • С помощью CSS-стилей растянем видео на весь экран и используем в качестве основного фона.

Создаем видеоплеер с помощью HTML

О том, как сделать видеоплеер у себя на сайте с помощью HTML5 мы уже говорили в статье Проигрыватель видео HTML5. В той же статье мы обсуждали вопрос кроссбраузерности, вспомним основную идею:

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

Поэтому, создадим видео для фона сайта в двух форматах: H.264 и WebM. Этого будет достаточно, чтобы охватить основной ряд современных браузеров (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer). Полученное видео рекомендуется обернуть в тег div для последующего позиционирования. Получим следующий код HTML:

Благодаря атрибуту autoplay видео будет проигрываться сразу после загрузки страницы, когда решит браузер (поскольку атрибут preload стоит на значении auto).

Настраиваем стили с помощью CSS

Рассмотрим теперь CSS-код для видео.

Полный код страницы с установленным видео в качестве фона сайта:

Здесь мы, по-сути, добавляем блок с видео с помощью HTML, и с помощью CSS растягиваем его на весь экран.

Создание полноэкранного HTML5 видео для фона страницы

Свойства CSS background или background-image могут принимать в качестве значений только растровые изображения, SVG, цвет и градиенты. Видео как фон можно использовать, разместив его позади других HTML-элементов. Задача состоит в том, чтобы видео заполняло окно браузера, и было адаптивным, как фоновые изображения.

Соображения и ограничения

При реализации необходимо учесть несколько факторов:

  • Автоматическое воспроизведение видео и звука должно быть отключено. Можно создать кнопку включения звука с помощью JavaScript.
  • Видео должно иметь изображение-заполнитель для браузеров, которые не поддерживают HTML5. Оно также отображается на мобильных устройствах. Многие смартфоны и планшеты не поддерживают атрибут autoplay.
  • К ороткое видео может казаться повторяющимся (большинство роликов будет воспроизводиться циклически). Слишком длинное заслуживает того, чтобы стать отдельным элементом дизайна. Оптимальная продолжительность фонового видео составляет 12- 30 секунд.
  • Видео должно быть небольшим и сжатым. В то же время оно должно масштабироваться на разных устройствах и экранах. Можно использовать медиазапросы или matchmedia для отправки версий видео разного качества на пользовательские устройства с экранами различных размеров. При этом размер ролика не должен превышать 5 МБ, а в идеале – менее 500 КБ.

Подход на чистом CSS

Важно : порядок видеофайлов имеет значение. В браузере Google Chrome есть ошибка, из-за которой он не может автоматически воспроизводить видео в формате .webm, если оно идет после чего-либо еще.

Изображение постера будет заменено первым кадром видео после загрузки. Поэтому имеет смысл извлечь его из ролика.

Приведенный ниже код позволяет сделать видео полноэкранным :

Устаревшие версии браузеров не распознают видео форматы, но узнают тег . Специально для этих браузеров мы создаем элемент background-image, используя ту же картинку-заполнитель.

На данном этапе только браузер Safari (мобильный и настольный) требует webkit-префикса поставщика для преобразований, поэтому он был включен в код.

Примечание по IE 8

IE8 не только не распознает тег , но и весь HTML5. Но нам нужно стилизовать элемент в браузере и поместить в него фоновое изображение. Чтобы решить эту проблему, потребуется следующий код:

И объявление внутри CSS, которое позволяет IE понять, что это элемент уровня блока:

Что позволяет в IE8 стилизовать с помощью фонового изображения.

Обслуживание мобильных устройств

Отображение полноэкранного фонового видео на мобильных устройствах связано с несколькими проблемами:

  1. Многие мобильные платформы отказываются автоматически воспроизводить HTML5- видео, чтобы уменьшить потребление трафика.
  2. На таких платформах фоновое видео будет отображаться со встроенной кнопкой воспроизведения, которая…
  3. … может перехватывать прикосновения к устройству, блокируя ссылки в контенте, размещенном поверх фонового видео.

Можно реализовать поддержку автозапуска видео с помощью JavaScript. Но самое простое решение – использовать медиа запрос, который отключает фоновое видео на маленьких экранах, заменяя его изображением-заполнителем. К существующему CSS-коду добавьте:

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

Интеграция доступности

Пользователи с вестибулярными расстройствами могут быть дезориентированы. Особенно при попытке прочитать текст, размещенный поверх движущегося изображения. А люди с аутистическими расстройствами могут быть обеспокоены быстрыми изменениями. Поэтому кнопка паузы должна быть расположена в пределах досягаемости:

Для браузеров, в которых включен параметр доступности Prefers Reduced Motion (в настоящее время Safari 10.1), добавьте скрипт в нижнюю часть страницы:

По умолчанию для этих пользователей видео будет приостановлено.

В идеале, фоновое видео должно останавливаться и исчезать сразу после первого воспроизведения. Чтобы реализовать это, добавьте следующий код:

JavaScript добавляет несколько строк кода CSS (для простоты префиксы поставщиков не указаны):

Также нужно написать CSS для скрытия кнопки на мобильных устройствах. Иначе она будет отображаться на iPhone с iOS 9 или ниже.

Альтернативы на чистом JavaScript

Решение на HTML5 / CSS лучше, чем использование фреймворка. Но есть один JQuery-плагин , который позволяет получить результат, аналогичный описанному в статье.

Заключение

Фоновое видео может быть мощной функцией. Но с большой силой приходит и ответственность: пожалуйста, используйте подобные функции разумно.

Посмотрите демо-версию решения, описанного в этой статье, на CodePen.

Данная публикация представляет собой перевод статьи « Create Fullscreen HTML5 Page Background Video » , подготовленной дружной командой проекта Интернет-технологии.ру

Видео в качестве фона для сайта на HTML5+CSS

На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.

Рекомендации

Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:

  1. Во-первых, нужно обязательно помнить о том, что видеоролик имеет довольно большой вес. Это может негативно сказаться на скорости загрузки страницы, особенно если у пользователя медленный интернет. Поэтому выбирайте не слишком продолжительные по времени видеоролики. В случае, когда требуется использовать довольно длинное видео, будьте готовы либо к работе над уменьшением его веса, либо к тому, что придется жертвовать частью аудитории.
  2. Во-вторых, избегайте автовоспроизведения звука из видео. Используйте либо ролики без аудио, либо добавьте возможность пользователю самому включить звук, если ему это понадобится. Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном.
  3. В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео (для тех случаев, если оно не воспроизведется). Ниже в нашем примере мы покажем, как это сделать.
  4. И в-четвертых, стоит хорошо подумать, уместен ли видеофон на том сайте, где вы захотели его установить, поскольку очень легко переступить грань между оригинальностью и бесполезностью данной затеи. Видео ни в коем случае не должно отвлекать пользователя от его главной цели, по причине которой он пришел на сайт. Устанавливая видео-фон под текстовым содержимым, не забудьте проверить, насколько читабельным стал текст. Например, он может слиться с фоном в определенный момент проигрывания видеоролика (белый текст на белом фоне, черный на черном и т. п.).

1. HTML

Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока

Для тега указаны следующие атрибуты:

  • width – ширина области для воспроизведения ролика;
  • height – высота области;
  • preload – загрузка видео вместе со страницей;
  • autoplay – автоматическое воспроизведение видео;
  • loop – циклическое повторение видео;
  • poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.

Далее у нас записано два тега , где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут type с соответствующими значениями помогает браузеру быстрее определиться с выбором.

2. CSS

Наша таблица стилей для фона выглядит следующим образом:

Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео). В самом крайнем случае будет задействован цвет фона #94a233 .

Также в коде есть директива @supports , которая проверяет, поддерживает ли браузер свойство object-fit . Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.

Согласно данным с сайта caniuse.com, на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.

Вот и всё. Надеемся, данный урок принес вас пользу. Если у вас есть другие интересные и простые способы установки видео в качестве фона для сайта и вы хотите поделиться ими, пишите в комментариях!

Как сделать видео фоном сайта

Наверняка многие из вас задумывались о том, как добавить динамичности своему сайту, но не могли внести какие-либо глобальные изменения из-за того, что это сложно. В этой статье мы расскажем вам как сделать видео фоном сайта за 10 минут.

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

Как сделать видео фоном сайта

Сделать фоном видео очень просто. Для этого необходимо:

Вставить код в html:

Вставить код в CSS:

Отключаем видео и заменяем его картинкой для мобильных устройств.

Выбрать и подготовить видео

Как выбрать и подготовить видео для фона сайта

Одна из проблем с подбором видео для фона сайта связана не только с самим подбором, но и с авторскими правами. Поэтому к поиску видео следует отнестись серьёзно. Ниже представлен список ресурсов, где вы можете найти и скачать подходящее бесплатное или платное видео:

Также необходимо учитывать, что для кроссбраузерности следует добавлять видео в нескольких форматах, а именно .mp4 и .webm

Вот русскоязычный ресурс, на котором можно скачать программы для конвертирования видео в нужный формат.

Как добавить видео фоном в шаблон Moguta CMS

Куда вставлять файл видео, HTML-код и CSS-стили в шаблоне Moguta:

Делаем видео фоном сайта — как за 2 шага сделать видео фоном сайта

Фон для сайта бывает различных видов: текстуры, сплошной цвет, изображение и т.д. Но фоном также еще может быть и видео! Не просто статическое изображение, а «25 изображений в секунду». Понятно то, что не любое видео подойдет для этого, но об этом мы поговорим дальше в статье. Также рассмотрим сам процесс установки, то есть как сделать видео фоном сайта с технической стороны.

Рекомендую к прочтению следующую статью на тему лендингов, где я подробно рассказал о самых популярных способах создания лендинга:

Живая демонстрация того, как на фоне сайта располагается видео:

Посмотреть примерСкачать

Скриншот с примером:

Как сделать видео фоном сайта или лендинга?

1 HTML структура

Определимся со структурой. Мы будем использовать теги HTML5 для вставки видео:

Пару слов по коду:

  • Строки: со 2 по 4 — блок затемнения, который содержит заголовок.
  • Строки: с 5 по 8 — часть с видео.

Оба дочерних блока будут находится в абсолютном позиционировании и в блоке с классом «overlay» мы можем располагать всю информацию, которая обычно находится в первом экране любого лендинга.

2 CSS стили

Осталось правильно задать стили, чтобы видео оказалось именно на фоне первого блока:

Здесь я привел стили только для первого блока на странице. В исходниках Вы можете найти стили полностью для всего демо.

Но так как интернет на мобильных устройствах по скорости уступает настольных компьютерам, то для ширины экрана менее 786px мы не будем показывать видео, а покажем лишь изображение:

Где взять красивые видео для фона сайта?

Рекомендую следующие видеостоки (список обновлен в октябре 2020):

После скачивания обязательно переконвертируйте видео чтобы уменьшить его размер.

Также добавьте данную статью в закладки «CTRL+D», чтобы видеостоки были всегда под рукой.

Вывод

Установка в 2 шага. Вам лишь нужно скопировать HTML и CSS в нужное место. Но правильно подобранное видео смотрится очень красиво.

Видео на фоне хоть и не интерактивный элемент, но внимание привлекает. Чтобы еще больше завлечь своих посетителей — рекомендую изучить статью по квизам.

Успехов!

Еще материалы по этой теме

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

47 комментариев к записи

За ссылки на фоны спасибочки ��

Большое спасибо за урок.

Хотелось бы еще знать как можно избежать появления черного экрана вместо видео при обновлении страницы. Пытался поставить фоновое изображение, как в постере, но это не помогло.

Черного экрана можно избежать вставив изображение либо с помощью атрибута «poster«, либо с помощью фонового изображения для блока, в котором находится видео через CSS.

Также необходимо смотреть на то, чтобы данные изображения были небольшого размера и попробовать их максимально сжать.

Не помогает поставить poster и через css также не вышло)

Здравствуйте, вопрос такой ,на вордпрессе делаю сайт с загруженной темой c themeforest но никак не могу разобраться,вообщем то хочу видео в качестве фона ну или по крайней мере в качестве шапки на сайте но ничего не получается

Плохо, что не получается.

На слове вордпресс уже мог и закончить))))

а паддинг для чего не пойму в основном блоке !

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

как сделать по стилю видео само в окне меньше а то оно у меня показывает как то верхний край, окно 840х377

пол видео не видно…

Добрый день, Роман!

Видео находится в блоке с классом fullscreen-bg, изменяя его размер, вы будете изменять размер видео.

Доброе время суток!

Такой вопрос… Как сделать что бы в начале не видно было плаера… а постоянно видео повторяющие!

А то видно когда заходишь на сайт в шапке видео плаер грузит видео.

Добрый день, Роман!

Необходимо сделать фоновое изображение, которое будет показываться до того момента, когда видео еще не прогрузилось. Путь до изображения задается в атрибуте «poster» в html.

Ау меня видео почему то не включается, кто может подсказать где ошибся?

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

Вы используете плагин FullPage.js. Активному слайду он добавляет класс «active», поэтому вам необходимо сделать проверку, когда данный класс будет добавлен слайду, где должно находится видео, то с помощью jQuery (можете воспользоваться функцией .html() , или просто написать на JS ), добавить в нужное место код видео.

В этом случае оно заработает.

ни слова не понял)), можете дать код и сказать куда его скопировать?)))

Если бы она была.. Эта волшебная кнопка, которая сразу делает как надо)

В вашем случае лучше они раз разобраться как это работает и сделать это. Потому что в дальнейшем сложно будет сделать что-то сложнее простого слайдера.

Здесь все достаточно просто. Вам лишь необходимо по этапам сделать то, о чем я написал. Но так как вы ничего не сделали, то помочь вам тяжело. ��

Вы единственный из учителей интернета кто смог более менее доходчиво рассказать что и как, пожалуй задержусь на вашем сайте)) остальные просто молчали а кто и вовсе сказал не знаю в чем дело, ну значит надо учить jQuery или JS да, что бы оно заработало

Лучше всего обратите внимание на jQuery. Документацию с основами вы быстро освоите. А как освоите, поймете о чем я написал. Здесь ничего сложного нет. Если будут вопросы — пишите �� !

Юрий, здравствуйте! Хотел поставить пару кнопок на видео, но ссылки почему-то не кликабельны. Подскажите, пожалуйста, в чем причина и как исправить. Ссылки все верные.

Добрый день, Михаил!

Не могу понять, что это «пару кнопок на видео»? Объясните подробнее как вы все разместили на странице.

Юрий, у меня на сайте после встраивания конфликт с оверлеем, как сделать чтобы не конфликтовало?

Чтобы не конфликтовало, необходимо вам изучить данную статью — z-index.

Видео запускается без звука почему-то… Как сделать со звуком?

Как сделать видео фоном блока на CSS?

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

Чаще всего видеофон используется на landing page, для сайта с товаром, событием.

Преимущества и недостатки видео в фоне блока сайта

Плюсы: современное решение, динамический сценарий, красивое оформление
Минусы: увеличение времени загрузки страницы, проблеме с просмотром с мобильных устройств

Видео в блоке div на html и css

Первая часть кода — стили.

Вторая часть кода — html.

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

Проверить действие кода можно проверить.

Успехов в вёрстке! Если будут вопросы, пишите!

delay-delo.com

Блог web-разработчика Алексея Ртищева

Форма поиска

  1. Главная
  2. Как видео c YouTube поставить в фон сайта

Как видео c YouTube поставить в фон сайта

Не так давно передо мной встала задача установить фоном сайта видеоролик с Youtube. Решить задачу удалось использоваем небольшого скрипта JQuery. Сам скрипт можно скачать с репозитория тут tubular. Данный способ также подойдёт и для вывода фона в блоке в обёртке div-ов.

Инструкция по установке:

1. Присоеденить скрипт к сайту:

2. Редактируем index.js

где в функции указываем id нужного видеофайла с сервиса Youtube.

3. Вывод результата.

Ролик заполнит фон контейнера с (см. функцию).

Топ-пост этого месяца:  Как русифицировать WordPress
Добавить комментарий