[SOLVED] Help with a lightbox from a background video

[Boost]

Hi,

I'm struggling with a background video that should pop up as a lightbox/modal when the user click on it. Here is the video code part:

<div class="uk-position-cover uk-cover-container">
	<video src="<?= $page->block->video_upload->url ?>" loop muted playsinline uk-video="autoplay: inview"></video>
</div>

I'm using UIkit for the frontend. I tired to add uk-lightbox attribute with different combinations, but nothing works.

Any help will be appreciate!

Cheers

[AndZyk]

Hi @Boost,

you have to add the attribute "uk-lightbox" on a container and then add a link to open the lightbox:

<!-- Video as link -->
<div uk-lightbox>
	<a class="uk-position-cover uk-cover-container" href="<?= $page->block->video_upload->url ?>" data-caption="Caption for the Video">
		<video src="<?= $page->block->video_upload->url ?>" loop muted playsinline uk-video="autoplay: inview"></video>
	</a>
</div>

<!-- Link over video  -->
<div uk-lightbox>
	<video src="<?= $page->block->video_upload->url ?>" loop muted playsinline uk-video="autoplay: inview"></video>
	<a class="uk-position-cover" href="<?= $page->block->video_upload->url ?>" aria-label="Video-Link" data-caption="Caption for the Video"></a>
</div>

Regards, Andreas

[Boost]

Perfect! Thank you.