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

971
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 25
    Скрипты и модификации для Ucoz 2118
    Шаблоны форумов Ucoz 28
    Шаблоны сайтов Ucoz 431
    Авторство Webo4ki 309
    php скрипты для ucoz 57
    Графика для uCoz 40
    Мини-чат
    Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: