Не так давно мне повстречался отличный плагин, YouTubePopUp.
Для себя лично я дорабатывал JS, вдруг пригодится:
$(document).ready(function(){
var link = $("#rotation_banners a").attr('href');
if (typeof link !== 'undefined' && link.match(/(youtube.com)/)){
$("#rotation_banners a").YouTubePopUp();
}
if ($(".youtube").length > 0) {
$(".youtube").YouTubePopUp();
}
});
/*
Name: YouTubePopUp
Description: jQuery plugin to display YouTube or Vimeo video in PopUp, responsive and retina, easy to use.
Version: 1.0.1
Plugin URL: http://wp-time.com/youtube-popup-jquery-plugin/
Written By: Qassim Hassan
Updated By: Makarenko Ivan
Twitter: @QQQHZ
Websites: wp-time.com | qass.im | wp-plugins.in
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Copyright (c) 2016 - Qassim Hassan
Updated: 2016.06.25
Updated by: Ivan Makarenko
Description: Add supporting of other links to youtube video, and more settings
See: more settings https://developers.google.com/youtube/player_parameters?hl=ru
*/
var auto_close = true;
var ik_player;
//this function is called by the API
function onYouTubeIframeAPIReady(playerid) {
playerid = 'youtube-iframe';
ik_player = new YT.Player(playerid, {
events: {
'onStateChange': onPlayerStateChange,
}
});
}
function onPlayerStateChange(event) {
if(event.data == '0' && auto_close) {
// destroy pop-up
$('.YouTubePopUp-Wrap').addClass('YouTubePopUp-Hide').delay(515).queue(function() { $(this).remove(); });
}
}
(function ( $ ) {
$.fn.YouTubePopUp = function(options) {
// include YouTubeAPI
if ($("script[src^='//www.youtube.com/player_api']").length === 0) {
var s = document.createElement("script");
s.src = "//www.youtube.com/player_api";
$("head").append(s);
}
// turn off auto close on complete
// and remove from options because not iframe option
if (options !== undefined && options.autoclose !== undefined) {
if (options.autoclose === 0) {
auto_close = false;
}
delete options.autoclose;
}
var YouTubePopUpOptions = $.extend({
autoplay: 1,
rel: 0, // show relevant video after play? (1|0) if 0 auto close after end of playing
enablejsapi: 1, // access to use YouTube JS API (1|0)
showinfo: 0, // show title and author info (1|0)
playerapiid: 'youtube-iframe',
v: 3,
}, options );
$(this).on('click', function (e) {
// get youtube link from data or from href
var youtubeLink = $(this).data('youtube-link');
if (typeof youtubeLink == 'undefined') {
youtubeLink = $(this).attr('href');
}
// default aspect ratio is 4 by 3 but if set data full-wide is true then 16 by 9
var aspectRatio = $(this).data('aspect-ratio');
if(aspectRatio == '4by3') {
aspectRatio = 'embed-responsive embed-responsive-4by3';
} else {
aspectRatio = 'embed-responsive embed-responsive-16by9';
}
var split_c, split_n;
if( youtubeLink.match(/(youtube.com)/) ){
split_c = 'v=';
split_n = 1;
}
if( youtubeLink.match(/(youtube.com\/embed\/)/) ){
split_c = 'embed/';
split_n = 1;
}
if( youtubeLink.match(/(youtube.com\/v\/)/) ){
split_c = 'youtube.com/v/';
split_n = 1;
}
if( youtubeLink.match(/(youtu.be)/) || youtubeLink.match(/(vimeo.com\/)+[0-9]/) ){
split_c = '/';
split_n = 3;
}
if( youtubeLink.match(/(vimeo.com\/)+[a-zA-Z]/) ){
split_c = '/';
split_n = 5;
}
var getYouTubeVideoID = youtubeLink.split(split_c)[split_n];
var cleanVideoID = getYouTubeVideoID.replace(/(&)+(.*)/, '');
var videoEmbedLink = '', count = 0, key;
if( youtubeLink.match(/(youtu.be)/) || youtubeLink.match(/(youtube.com)/) ){
videoEmbedLink = 'https://www.youtube.com/embed/'+cleanVideoID+'';
// add settings
count = 0;
for(key in YouTubePopUpOptions) {
if (count < 1) {
videoEmbedLink += '?';
} else {
videoEmbedLink += '&';
}
videoEmbedLink += key+'='+YouTubePopUpOptions[key]+'';
count++;
}
}
if( youtubeLink.match(/(vimeo.com\/)+[0-9]/) || youtubeLink.match(/(vimeo.com\/)+[a-zA-Z]/) ){
videoEmbedLink = 'https://player.vimeo.com/video/'+cleanVideoID+'';
// add settings
count = 0;
for(key in YouTubePopUpOptions) {
if (count < 1) {
videoEmbedLink += '?';
} else {
videoEmbedLink += '&';
}
videoEmbedLink += key+'='+YouTubePopUpOptions[key]+'';
count++;
}
}
// append pop-up
$('body').append('<div class="YouTubePopUp-Wrap"><div class="YouTubePopUp-Content"><div class="'+aspectRatio+'"><span class="YouTubePopUp-Close"></span><iframe id="youtube-iframe" src="'+videoEmbedLink+'" allowfullscreen></iframe></div></div></div>');
$('.YouTubePopUp-Wrap, .YouTubePopUp-Close').click(function(){
$('.YouTubePopUp-Wrap').addClass('YouTubePopUp-Hide').delay(515).queue(function() { $(this).remove(); });
});
onYouTubeIframeAPIReady();
e.preventDefault();
});
$(document).keyup(function(e) {
if ( e.keyCode == 27 ){
$('.YouTubePopUp-Wrap, .YouTubePopUp-Close').click();
}
});
};
}( jQuery ));