Video Page Lightbox (Youtube)

by

Description

Click item in Video Page

Plugin12 1

will open Youtube video in Lightbox

Plugin12 2

#1. Install Code

Click Gear icon on Video Page

Plugin12 3

Click Advanced > Page Header Code Injection

Plugin12 4

Paste the code

<!-- Video Page Lightbox @tuanphan -->
<style>.video-lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.9);z-index:9999;align-items:center;justify-content:center}.video-lightbox.active{display:flex}.video-lightbox-content{position:relative;width:90%;max-width:1200px}.video-lightbox-iframe{position:relative;width:100%;padding-bottom:56.25%;height:0}.video-lightbox-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;padding:0;width:40px;height:40px;line-height:1}.video-lightbox iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}</style>
<script>document.addEventListener("DOMContentLoaded",function(){const e=document.createElement("div");e.className="video-lightbox",e.innerHTML='<div class="video-lightbox-content"><button class="video-lightbox-close">&times;</button><div class="video-lightbox-iframe"></div></div>',document.body.appendChild(e);const t=e.querySelector(".video-lightbox-close"),i=e.querySelector(".video-lightbox-iframe");t.addEventListener("click",function(){e.classList.remove("active"),i.innerHTML=""}),e.addEventListener("click",function(t){t.target===e&&(e.classList.remove("active"),i.innerHTML="")}),document.addEventListener("click",function(t){const n=t.target.closest('a[href*="/v/"]');if(n&&n.closest(".lessons-flex-container")){t.preventDefault();const c=n.getAttribute("href")+"?format=json";fetch(c).then(e=>e.json()).then(t=>{const n=t.item?.items?.[0]?.oembed?.url;if(n){const t=n.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&]+)/)?.[1];t&&(i.innerHTML=`<iframe src="https://www.youtube.com/embed/${t}?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`,e.classList.add("active"))}}).catch(e=>console.error("Error:",e))}})});</script>

Plugin12 5

#2. Usage

When you add Video > Choose Add from Link > Enter Youtube Link

Plugin12 6

Buy me a coffee