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

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

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

Дуже потрібно було недавно зробити відео background на одному сайті, і програвати відео саме з YouTube. Знайшов кілька плагінів, але зупинився на рішенні, заснованому на плеєрі jQuery 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а. Підключаємо красивий шрифт «Lato» (не обов'язково)
<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'>


4b. Підключаємо іконки 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=8WDccXyPxWk',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>
        
        <div class="pattern"></div> 
                                                               
</section>


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

Завантажити безкоштовно


templates scripts landing
628 19.08.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру