Widget:YtLightbox

<button type="button" class="spotlight">

 <iframe src="//www.youtube.com/embed/?" style="height:100%;width:100%;max-width:100%;border:0;" frameborder="0" allowfullscreen="true"></iframe>

</button> <script> RLQ.push(function () { var $spotlight = $('button.spotlight'); $spotlight.click(function() {

 var $body = $('body');

var $wrapper = $('

');

 $body.prepend($wrapper);
 $body.addClass('noscroll');

$wrapper.append('

<iframe src="//www.youtube.com/embed/?" frameborder="0" allowfullscreen="true">

',

   '<button type="button" title="Close (Esc)" class="spotlight-close">×</button>');
 $wrapper.click(function () { 
   removeSpotlight(); 
 });
 $body.keydown(function(e) {
   if (e.keyCode == 27) {
     removeSpotlight();
   }
 });
 function removeSpotlight() {
   $body.removeClass('noscroll');
   $wrapper.remove();
 }

}); $spotlight.find('iframe').replaceWith(['<img src="//img.youtube.com/vi//mqdefault.jpg" class="thumbnail">', '<img src="https://image.flaticon.com/icons/svg/220/220211.svg" class="play-icon">'])

}); </script> <style> .noscroll {

 overflow: hidden;

} .spotlight-wrapper {

 position: fixed;
 z-index: 999;
 width: 100%;
 height: 100%;
 text-align: center;
 top: 0;
 left: 0;
 background: rgba(0,0,0,0.85);

} .spotlight-container {

 position: relative;
 width: 90%;
 margin: 2% auto 0 auto;
 padding-top: 100px;
 height: 80%;
 overflow: hidden;

} .spotlight-container iframe {

 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

} .spotlight-close {

 position: fixed;
 right: 0;
 top: 0;
 z-index: 1001;
 display: inline-block;
 padding: 1em;
 color: #fff;
 font-size: 2em;
 border: 0;
 background: none;

} .spotlight {

 position: relative;
 border: 0;
 padding: 0;
 margin: 0;
 background: none;
 cursor: pointer;

} .spotlight .thumbnail {

 width: 314px;
 cursor: pointer;

} .spotlight .play-icon{

 cursor: pointer;
 position: absolute;
 width : 45px;
 height : 35px;
 top : 50%;
 left : 50%;
 transform: translate(-50%, -50%);

} </style>