$("a.youtube").YouTubePopUp( { autoplay: 0 } ); (function ( $ ) { var current = 0; $.fn.YouTubePopUp = function(options) { var YouTubePopUpOptions = $.extend({ autoplay: 1 }, options ); $(this).on('click', function (e) { current = $('a.youtube').index(this); var youtubeLink = $(this).attr("href"); if( youtubeLink.match(/(youtube.com)/) ){ var split_c = "v="; var split_n = 1; } if( youtubeLink.match(/(youtu.be)/) || youtubeLink.match(/(vimeo.com\/)+[0-9]/) ){ var split_c = "/"; var split_n = 3; } if( youtubeLink.match(/(vimeo.com\/)+[a-zA-Z]/) ){ var split_c = "/"; var split_n = 5; } var getYouTubeVideoID = youtubeLink.split(split_c)[split_n]; var cleanVideoID = getYouTubeVideoID.replace(/(&)+(.*)/, ""); if( youtubeLink.match(/(youtu.be)/) || youtubeLink.match(/(youtube.com)/) ){ var videoEmbedLink = "https://www.youtube.com/embed/"+cleanVideoID+"?autoplay="+YouTubePopUpOptions.autoplay+""; } if( youtubeLink.match(/(vimeo.com\/)+[0-9]/) || youtubeLink.match(/(vimeo.com\/)+[a-zA-Z]/) ){ var videoEmbedLink = "https://player.vimeo.com/video/"+cleanVideoID+"?autoplay="+YouTubePopUpOptions.autoplay+""; } $("body").remove('.YouTubePopUp-Wrap').append('<div class="YouTubePopUp-Wrap"><div class="YouTubePopUp-Content"><span class="YouTubePopUp-Close"></span><iframe src="'+videoEmbedLink+'" allowfullscreen></iframe><ul class="YouTubePopUpNavi"><li class="prev"><i class="fa fa-angle-left"></i></li><li class="next"><i class="fa fa-angle-right"></i></li></ul></div></div>'); $(".YouTubePopUp-Close").click(function(){ $(".YouTubePopUp-Wrap").addClass("YouTubePopUp-Hide").delay(1000).queue(function() { $(this).remove(); }); }); $('.YouTubePopUp-Wrap .YouTubePopUp-Content .YouTubePopUpNavi li.prev').on("click", function(){ var prev = (current == 0) ? $('a.youtube').length -1 : current - 1; $('a.youtube').eq(prev).click(); }); $('.YouTubePopUp-Wrap .YouTubePopUp-Content .YouTubePopUpNavi li.next').on("click", function(){ var next = (current == $('a.youtube').length - 1) ? 0 : current + 1; $('a.youtube').eq(next).click(); }); e.preventDefault(); }); $(document).keyup(function(e) { if ( e.keyCode == 27 ){ $('.YouTubePopUp-Wrap, .YouTubePopUp-Close').click(); } }); }; }( jQuery ));
<a class="youtube" href="https://www.youtube.com/watch?v=ShHGC9Ks7z0"><img src="https://i.ytimg.com/vi/ShHGC9Ks7z0/mqdefault.jpg" title="Valerie Joyce performs The Lamp Is Low" ></a> <a class="youtube" href="https://www.youtube.com/watch?v=0WfAYS8KTQY"><img src="https://i.ytimg.com/vi/0WfAYS8KTQY/mqdefault.jpg" title="If You Never Come To Me"></a> <a class="youtube" href="https://www.youtube.com/watch?v=s7NtM8kaUqA"><img src="https://i.ytimg.com/vi/s7NtM8kaUqA/mqdefault.jpg" title="Christmas Eve by Valerie Joyce"></a> <a class="youtube" href="https://www.youtube.com/watch?v=p4ABWMOcW-M"><img src="https://i.ytimg.com/vi/p4ABWMOcW-M/mqdefault.jpg" title="You Taught My Heart To Sing performed by Valerie Joyce"></a> <a class="youtube" href="https://www.youtube.com/watch?v=K1R6TqYrs5k"><img src="https://i.ytimg.com/vi/K1R6TqYrs5k/mqdefault.jpg" title="Fair Weather performed by Valerie Joyce"></a> <a class="youtube" href="https://www.youtube.com/watch?v=6XbIuSLaCnk"><img src="https://i.ytimg.com/vi/6XbIuSLaCnk/mqdefault.jpg" title="Jennifer Lopez - Papi"></a> <a class="youtube" href="https://vimeo.com/13031989"><img src="http://i.vimeocdn.com/video/74174940_320x180.jpg" title="Esquire woman we love - Katy Perry"></a> <a class="youtube" href="https://vimeo.com/57617869"><img src="http://i.vimeocdn.com/video/400076574_320x180.jpg" title="Beyoncé featuring Jay-Z Upgrade U"></a> <a class="youtube" href="https://vimeo.com/106747859"><img src="http://i.vimeocdn.com/video/489949204_320x180.jpg" title="Jennifer Lopez & Iggy Azalea - ‘Big Booty’ (full version)"></a>