Embed YouTube Video (~3kb)

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

Использование

Плагин создан с использование jQuery, поэтому не забудьте подключить сначала его, например через jQuery CDN

Скачайте архив с GitHub или использовуйте Bower: bower install jquery-embed-video.

Добавьте контейнеры для ваших видео используя следующий код:

<!-- Пример 1 -->
<div class="embed-youtube" data-id="hVvEISFw9w0" data-autoplay="1" width="100%" height="200"></div>

<!-- Пример 2 -->
<div class="embed-youtube" data-id="1La4QzGeaaQ" data-controls="0" width="100%" height="200"></div>

<!-- Пример 3 -->
<div class="embed-youtube" data-id="mHUOCxVT5ro" data-autoplay="1" data-alternative-cover="https://i.ytimg.com/vi/Fuf9MTgt5ts/sddefault.jpg" width="100%" height="200"></div>

Подключите скрипты перед закрывающим тегом </body>

<script type="text/javascript" src="{path_to_script}/jquery.embedVideo.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.embed-youtube').embedVideo({
            /* options */
        });
    });
</script>

Использование JS API

Для использования API подключите скрипты:

<script type="text/javascript" src="{path_to_script}/jquery.embedVideo.min.js"></script>

<script type="text/javascript" src="https://www.youtube.com/iframe_api">

Документация по iFrame API: https://developers.google.com/youtube/iframe_api_reference#Functions

Вместо предыдущего примера используйте следующее подключение скрипта

/**
 * Функция которая выполнится сразу,
 * после загрузки iFrame API на странице
 */
function onYouTubeIframeAPIReady() {
    $('.embed-video').embedVideo({            // Подключаем embedVideo.js
        enablejsapi: 1,                       // указываем, что будем использовать API
        origin: {ваш_домен},                  // меры безопасности для IFrame API
        callback: function(iframe) {
            /* создаем объект плеера */
            player = new YT.Player(iframe, {
                events: {
                    'onReady': function(){
                        player.playVideo();   // автопроигрывание видео через API
                    }
                }
            });
        }
    });
}

Параметры

Настройки плагина или отдельного контейнера через атрибут [data-*]. Поддерживает все параметры плеера https://developers.google.com/youtube/player_parameters и дополнительные настройки планина описанные ниже в таблице.

[data-*]	options	доступные значения	описание
id	id	{string}	ID видео
size-preview	sizePreview	default, mqdefault, hqdefault, sddefault, maxresdefault	Размер изображения превью, генерируемых YouTube.
auto-size-preview	autoSizePreview	true/false	Определять автоматически размер превью, исходя из размеров контейнера.
alternative-cover	alternativeCover	{string}	Ссылка на альтернативную обложку превью. Не работает с auto-size-preview.
image-play-container	imagePlayContainer	{string} <тег>	HTML тег кнопки "play" на превью. По-умолчанию SVG иконка. Можно заменить на собственную иконку SVG или IMG.
image-play-opacity	imagePlayOpacity	0 - 1 (по-умолчанию 0.85)	Прозрачность кнопки "play" если задана, будет заметна анимация при наведении на контейнер с видео.
callback		function(player) {}	Колбэк функция, которая выполнится после создания iframe (после клика по превью).