/*! * GRT Youtube Popup - jQuery Plugin * Version: 1.0 * Author: GRT107 * * Copyright (c) 2017 GRT107 * Released under the MIT license */ (function ( $ ) { $.fn.grtyoutube = function( options ) { return this.each(function() { // Get video ID var getvideoid = $(this).attr("youtubeid"); // Default options var settings = $.extend({ videoID: getvideoid, autoPlay: true, theme: "dark" }, options ); // Convert some values if(settings.autoPlay === true) { settings.autoPlay = 1 } else if(settings.autoPlay === false) { settings.autoPlay = 0 } if(settings.theme === "dark") { settings.theme = "grtyoutube-dark-theme" } else if(settings.theme === "light") { settings.theme = "grtyoutube-light-theme" } // Initialize on click if(getvideoid) { $(this).on( "click", function() { $("body").append('<div class="grtyoutube-popup '+settings.theme+'">'+ '<div class="grtyoutube-popup-content">'+ '<span class="grtyoutube-popup-close"></span>'+ '<iframe class="grtyoutube-iframe" src="https://www.youtube.com/embed/'+settings.videoID+'?rel=0&wmode=transparent&autoplay='+settings.autoPlay+'&iv_load_policy=3" allowfullscreen frameborder="0"></iframe>'+ '</div>'+ '</div>'); }); } // Close the box on click or escape $(this).on('click', function (event) { event.preventDefault(); $(".grtyoutube-popup-close, .grtyoutube-popup").click(function(){ $(".grtyoutube-popup").remove(); }); }); $(document).keyup(function(event) { if (event.keyCode == 27){ $(".grtyoutube-popup").remove(); } }); }); }; }( jQuery )); $(".youtube-link").grtyoutube();
.grtyoutube-popup { position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999; } .grtyoutube-popup-content { margin-top:150px; width:95%; max-width:850px; margin-left:auto; margin-right:auto; position:relative; } .grtyoutube-popup-close { position:absolute; top:-30px; right:0; color:#FFF; font-size:25px; width:17px; height:17px; cursor:pointer; } .grtyoutube-iframe { width:100%; height:480px; } @media (max-width:767px) { .grtyoutube-iframe { width:100%; height:350px; } } .grtyoutube-dark-theme{ background: rgba(0,0,0, 0.85); } .grtyoutube-dark-theme .grtyoutube-popup-content { -webkit-box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4); -moz-box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4); box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4); } .grtyoutube-dark-theme .grtyoutube-popup-close { background: url('icon-close-white.png') no-repeat; } .grtyoutube-light-theme { background: rgba(255,255,255, 0.85); } .grtyoutube-light-theme .grtyoutube-popup-content { -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4); } .grtyoutube-light-theme .grtyoutube-popup-close { background: url('icon-close-black.png') no-repeat; }
<span class="youtube-link" youtubeid="yPu6qV5byu4">クリックで再生 ▶</span>