33455925-7ecf-4e63-919b-23b3e9a9c671

JCB! Snippet

Cover Video

Expand images, videos or iframes to cover their entire container and place your own content on top.

Snippet

<div class="uk-cover-container uk-height-medium">
    <video autoplay loop muted playsinline uk-cover>
        <source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
        <source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
    </video>
</div>

Usage

To create a video that covers its parent container, add the uk-cover attribute to a video. Wrap a container element around the video and add the .uk-cover-container class to clip the content.

The Cover component inherits all properties from the Video component which means videos are muted and play automatically. The video will pause whenever it's not visible and resume once it becomes visible again.

Contributor

• Vast Development Method
• email
• website

Streamline your Joomla development with a single, reusable snippet designed for flexibility, consistency, and easy updates.

Used in Joomla Component Builder - Source - Mirror - Download

---