jQuery YouTube Popup Player

YouTube & Vimeo

$("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>
			
ページトップへ戻る