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

Как поставить видео на фон лендинг пейджВсем привет. Позавчера в ВК списался с одним парнем, который хотел сделать видеофон для сайта. (Привет Стас :) Надеюсь ты не против, что я пишу эту статью подобным образом). Так вот, у него возникла проблема. С его слов я понял, что он делает сайт на конструкторе и загрузить свои видео на хостинг - нет возможности. Единственный способ, как он сказал, это подключить видео со стороннего сервиса.

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

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

Я скинул Станиславу 2 ссылки, одну с хабра, одну с другого сайта. Сказал, что вот варианты, но я сам не тестировал и не знаю получиться ли. Он поблагодарил и пообещал отписаться о результатах. То есть еще один человек, который не остался равнодушен. Спасибо таким людям.

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

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

Скачать исходник

Первым делом нужно скачать исходник, там в папке js будет лежать 2 скрипта. Их нужно скопировать в свой проект. После этого подключаем jquery и прописываем пути к скриптам:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- подключаем jquery -->
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> <!-- подключаем плагин -->
<script type="text/javascript" charset="utf-8" src="js/index.js"></script> <!-- добавляем id видеофайла с Youtube -->

Теперь, для того, чтобы вставить свое видео, нужно в скрипт подставит id видео файла из ссылки на Youtube:

Файл index.js:

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

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

youtube видео на фон

Убедитесь, что в ролике не присутствует реклама или ссылки на другие материалы, как в примере выше. Я специально взял такое видео, чтобы вы наглядно убедились и не допустили подобной ошибки. Start: 3 - означает, что видео начнет воспроизводится с 3 секунды. Другие настройки найдете в файле jquery.tubular.1.0.js, начиная с 19 строки. Звук, ширина и высота, кнопки управления и т.д.

Еще, важным элементом является то, что нужно заполнить видеофоном конкретную область. В скрипте используется контейнер с id="wrapper". Как по мне, то это очень удобно.

<div id="wrapper">

 <p>smartlanding.biz</p>

</div>

А на сегодня - все! Теперь вы знаете как поставить видео с Youtube на фон сайта. Всем пока!

P.s.: Для того, чтобы посмотреть результат, залейте на локальный или реальный сервер.

39 комментариев

  1. Людмила

    Здравствуйте, нашла то, что искала - видеофон для сайта. Как его делать в muse научилась, но очень было интересно сделать его в другом конструкторе, более простом. И о радость - нашла! Спасибо! Исходник - это просто замечательно! Но вот с исходником видеофона с ютуб не получилось скачать - вот что выскакивает, когда нажимаю скачать - clip2net.com/s/3bXvy2K Возможно ли получить этот исходник в правильном виде?

    1. dimadv7

      Здравствуйте, не знаю, почему у вас возникла такая проблема, проверил - работает. Исходник на почту кинул)

    2. Евген

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

    3. dimadv7

      Воспользоваться не видеофоном с youtuba, а стандартным html5 тегом для видео. Вот статья: https://smartlanding.biz/kak-sdelat-video-fon-dlya-lending-pejdzh.html

    4. Владимир

      На самом деле, чтобы убрать видео для мобильных устройств, можно воспользоваться медиа запросом и задать размеры, когда блок с видео будет получать свойство "display:none;", а нужное фоновое изображение поставить как обычно на body

  2. Дима

    в скрипте указаны комментарии-подсказки:
    // f-UGhWj1xww cool sepia hd
    // 49SKbS7Xwf4 beautiful barn sepia
    для чего они?
    Есть подозрение, что можно добавить визуальный эффект к своему видео. Если это так, то было бы интересно понять , как их "включить"

    1. dimadv7

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

  3. naspret

    Спасибо - запилил! Пара вопросов.
    Подскажи новичку пожалуйста как закрепить видео сверху? что бы оно проматывалось вместе с контентом?
    И еще вопрос { videoId: 'aalMWOoqyZM', start: 3 }; что означает start:3? За что отвечает этот параметр?

    1. dimadv7

      Здорово. Привет. Цифра три, говорит с какой секунды начать проигрывание видео. Иногда, если канал не наш, то на нем в первые секунды может выскочить реклама, а таким образам можно начать показывать видео, например с 20 секунды, сразу после рекламы и т.д. Насчет фиксирования:

      #wrapper{
          position: fixed;
      }
      
    2. naspret

      Спасибо! Еще одна фишка... не знаю как избавиться от этой проблемы. При окончании видео на долю секунды появляется окно "похожие видео" с ютуба. а затем проигрывается видео заново. Можно ли этого как то избежать?

    3. naspret

      И если делаешь position: fixed; то сайт обрезается по размеру окна (

    4. dimadv7

      Что значит обрезается по размеру окна? У тебя было все адаптивным, а сейчас перестало или как?

  4. naspret

    Страница не прокручивается ниже.
    Пример вот тут...
    vincom.esy.es

    1. dimadv7

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

    2. naspret

      Не... чет не выходит. Или у меня мозгов не хватает, или одно из двух :)

    3. dimadv7

      Смотри, если в исходнике дописать + 100500 строчек текста внутри враппер и задать врапперу position:fixed; То ничего не обрезается, все нормально скроллится, а видео на месте. Тебе тоже нужно сделать так, поместить весь контент внутрь блока wrapper или своего какого-нибудь, но тогда и в скрипте заменить на свой нужно будет.

  5. Владимир

    А как включить звук?

    1. dimadv7

      В файле jquery.tubular.1.0.js описаны все дополнительные настройки. Конкретно для звука - так:

      var options = { videoId: 'IQbDmCKGtuU', mute: false};
    2. Владимир

      Спасибо!!

    3. dimadv7

      Да не за что)))

    4. Владимир

      А как можно осуществить такую штуку - вынести кнопки управления на передний план для того, чтобы включать/отключать видео? Ну, то есть, кнопки, независимые от плеера, но управляемые по API? Искал в интернете, и ничего на это тему не нашел :(

    5. dimadv7

      Не знаю, я не вникал, посмотри на странице плагина, там такая функция реализована. Ссылка в файле jquery.tubular.1.0.js. Если получится, напиши)

    6. Владимир

      Да! Нашел, сделал, получилось. Спасибо ^_^

    7. Oleg

      А настроить громкость звука в видео? Подскажите пожалуйста.)

  6. Олег

    Отличный вариант, очень простой. Один вопрос - как бы сделать так, чтобы пользователям с мобильных телефонов не показывался ролик? Ибо трафик безлимитный не у всех.

    1. Олег

      Даже так: сделал, что на больших экранах видео показывается, а маленьких поставил display:none для видео-блока, но вот думаю, что в таком случае видео на мобильных устройствах всё равно грузится.

    2. dimadv7

      Не. Не в курсе. Могу предложить только использовать ролик не с ютуба.

  7. Виталий

    Привет, слушайте, может вы сможете помочь. Задача такова. Нужно поместить видео как фон для сайта. ( это не сложно ). Сделать кнопку например.. и то по нажатию этой кнопки видео начинало играть. Реализуемо?

    1. dimadv7

      Я не вникал как это делается, посмотри на странице плагина, там такая функция реализована. Ссылка в файле jquery.tubular.1.0.js. Если получится, напиши)

  8. Игорь

    Доброй ночи,

    После вставки видео залило весь сайт. Как это можно исправить?

    1. dimadv7

      Здравствуйте. Попробуйте изменить позиционирование :)

  9. Руслан

    Не работает ошибка "file://www.youtube.com/iframe_api Failed to load resource: net::ERR_FILE_NOT_FOUND "

    1. dimadv7

      Проверил - все работает.

  10. Zensog

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

    1. dimadv7

      Здравствуйте, я не в курсе, если честно. А что, нужно именно определенное количество повторений? Никогда не сталкивался с такой задачей, и не могу себе представить, где это может понадобиться, да еще и в качестве фона для страницы...

  11. сергей

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

    1. dimadv7

      Проверил, все работает. Видео правда нет того, но на фоне шипит ютубовский плеер.

  12. Oleg

    В файле jquery.tubular.1.0.js описаны все дополнительные настройки. Конкретно для звука — так:

    1
    var options = { videoId: 'IQbDmCKGtuU', mute: false};

    А как настроить громкость звука?

    1. dimadv7

      Я не в курсе, честно.

Добавить комментарий