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

1126
9.8 из 10
Проголосовало: 13






Доброе день,вы хотите сделать видео 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 2123
    Шаблоны форумов Ucoz 28
    Шаблоны сайтов Ucoz 431
    Авторство Webo4ki 309
    php скрипты для ucoz 57
    Графика для uCoz 40
    Мини-чат
    Последние комментарии
  • Marishka написал:
  • По просьбам поправили!.
    1. Делаем все как написано.
    2. Находим файл /Ucoz4/ctena_user2_wall_v2.js и меняем все в файле из нашего файла:
    Код
    http://mbs.usite.pro/ctena_user2_wall_v2.js
  • rayven написал:
  • в любом случае, всегда надо под свои нужды настраивать руками. А скрипт пригодиться, не тут, так там.
  • rayven написал:
  • даже Вовчик со мной согласен. tongue
  • Marishka написал:
  • Upd 1.4 Кому лень https://jsfiddle.net/7js6tfp1/5/
  • Marishka написал:
  • Мы обновили код и упростили его установку:
    Что нового:
    1. Новый легкий js код.
    2. Отправка по Enter если есть или нет Aa цвета.
    3. Простая установка.

    Принцип работы:
    Используется родное поле ввода текста с выбором цвета, родная кнопка отправки скрывается позволяя отправить форму по Enter.

    Демо: https://jsfiddle.net/7js6tfp1/4/
    Последние темы
    Опрос
    289
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: