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 class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="video-popup vp-6f421db9 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="dQw4w9WgXcQ"><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>
</section>

To learn more about the Video Popup shortcode, please check out the online manual here.