Media
Video Popup
A thumbnail that opens a video in a lightbox.
Live demo
See it in action
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12 d-flex flex-column align-items-center">
<div class="video-popup vp-1077008c fw-vp fw-vp--design-classic design-classic fw-vp--ratio-16-9 fw-vp--play-lg rounded fw-vp--overlay fw-vp--zoom">
<button type="button" class="fw-vp__trigger" aria-label="Play the video" data-vp-type="youtube" data-vp-src="aqz-KE-bpKQ"><span class="fw-vp__media"><img class="fw-vp__poster" src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-30a6bb9c8540.jpg" alt="" loading="lazy" decoding="async" /><span class="fw-vp__btn" aria-hidden="true"><span class="fw-vp__pulse"></span><span class="fw-vp__icon"><svg class="fw-vp__triangle" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round" d="M9 6.3 L18.5 12 L9 17.7 Z"/></svg></span></span></span></button>
</div>
</div>
</div>
</div>
</section>To learn more about the Video Popup shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.