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


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

621
9.8 из 10
Проголосовало: 12






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

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

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

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

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

    1. Скачиваем архив с сервера.
    2. Заливаем все файлы и папки из архива в корень сайта.
    3. Подключаем стили.

    Код

    <link rel="stylesheet" href="css/normalize.css" media="all">
    <link rel="stylesheet" href="css/style.css" media="all">


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

    Код

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/device.min.js"></script>
    <script src="js/jquery.mb.YTPlayer.js"></script>
    <script src="js/custom.js"></script>


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

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

    Код

    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,700,600,800,900' rel='stylesheet' type='text/css'>


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

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

    Код

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


    5. Вставляем HTML-код:

    Код

    <section class="big-background">
      <a id="bgndVideo" class="player" data-property="{videoURL:'http://www.youtube.com/watch?v=t9ex0w6HUpQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>

      <div class="pattern"></div>  

    </section>


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

    Код
    <section class="big-background">
      <a id="bgndVideo" class="player" data-property="{videoURL:'http://www.youtube.com/watch?v=8WDccXyPxWk',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>

      <div class="pattern"></div>
      <div class="big-background-container">
      <h1 class="big-background-title">YOUTUBE</h1>
      <div class="divider"></div>
      <h1 id="colorize">VIDEO BACKGROUND</h1>
      <a href="http://webo4ka.ru" class="big-background-btn">Webo4ka.Ru</a>
      </div>  
      </section>
       

      <div class="wrapper">

      <section class="about-section">

      <div class="about-section-container">
      <h2 class="about-section-title">USE A COOL YOUTUBE VIDEO BACKGROUND</h2>
      <p>Wondering how you might add a video background on your site? <br/>It's so easy! Introducing jQuery MB.YTPlayer, a jQuery plugin that enables you to display Youtube videos on your webpages. <br/>It's so awesome that it can transform your Youtube video into an HTML background at ease! No slow server loading time!</p>
      <a href="http://bayguzin.ru" target="_blank" class="about-section-btn">Check it here</a>
      </div>

      </section>
       

      <section class="small-background-section">
      <div class="pattern"></div>
      <div class="small-background-container">
      <h2 class="small-background-title"><span>Find us on social media</span></h2>
      <ul class="socials">
      <li><a href="" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li>
      <li><a href="" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li>
      <li><a href="" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li>

      </ul>
      </div>
      </section>

    </div>
  • Автор публикации: Загрузка
    Загрузка
    Вовчик, это его n материал
    Источник: http://bayguzin.ru
    • Всего комментариев: 9

    lifee
    0
    lifee написал: Написано 05 Марта 2016 в 15:58
    Комментарий №7
    можно скачать видео, ужать до ~10мб и через object добавить

    Вовчик
    0
    Вовчик написал: Написано 03 Марта 2016 в 17:36
    Комментарий №4
    да щас у 90% пользователей скоростной и безлимитный интернет, а остальные 10% на такой сайт где будет стоять видео фон навряд ли зайдут, т.к. этот видео абы куда вставлять не будут...

    Десерт
    0
    Десерт написал: Написано 02 Марта 2016 в 22:21
    Комментарий №1
    Очень круто выглядит, но есть страх, что он будет очень сильно грузить сайт. Попросту у тех у кого слабый интернет, сайт будет грузиться очень долго. А так всё очень красиво выглядит.

    na3uTuB4uk94
    0
    na3uTuB4uk94 написал: Написано 03 Марта 2016 в 14:11
    Комментарий №2
    Согласен, скрипт интересный, полезный, ну вот как быть со слабочками, они же плакаться будут когда весь сайт виснуть начнет.

    Десерт
    0
    Десерт написал: Написано 03 Марта 2016 в 16:47
    Комментарий №3
    Они попросту больше не будут заходить на сайт smile

    na3uTuB4uk94
    0
    na3uTuB4uk94 написал: Написано 04 Марта 2016 в 14:23
    Комментарий №5
    Их и так то не особо, а так еще если и последние уйдут, будет пичалька happy

    Десерт
    0
    Десерт написал: Написано 04 Марта 2016 в 14:24
    Комментарий №6
    Да печалька будет очень сильная

    schoolonly
    0
    schoolonly написал: Написано 30 Апреля 2016 в 20:34
    Комментарий №8
    Именно поэтому и не делаю крутой дизайн XD

    rayven
    0
    rayven написал: Написано 30 Апреля 2016 в 21:29
    Комментарий №9
    иногда самый лучший дизайн — тот, которого не видно wink

    • Оставить комментарий:
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход
    Меню сайта
    Категории
    Для помощи создания сайта uCoz 24
    Скрипты и модификации для Ucoz 2101
    Шаблоны форумов Ucoz 28
    Шаблоны сайтов Ucoz 429
    Авторство Webo4ki 309
    php скрипты для ucoz 57
    Графика для uCoz 40
    Мини-чат
    Последние комментарии
    Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
    как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 10
    Гостей: 9
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: