Cover

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

Usage

To have an image cover its parent element, add the .uk-cover-container class to the parent and the uk-cover attribute to the image.

<div class="uk-cover-container">
  <img src="" alt="" uk-cover />
</div>

Note To position content on top of the covering element, use the Position component.

Copy to clipboard
  • <div class="uk-cover-container uk-height-medium">
      <img src="/images/dark.jpg" alt="" uk-cover />
    </div>

Video

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.

<div class="uk-cover-container">
  <video uk-cover></video>
</div>
Copy to clipboard
  • <div class="uk-cover-container uk-height-medium">
      <video
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        loop
        muted
        playsinline
        uk-cover
      ></video>
    </div>

Iframe

To apply the Cover component to an iframe, you need to add the uk-cover attribute to the iframe. Now add the .uk-cover-container class to a container element around the iframe to clip the content.

<div class="uk-cover-container">
  <iframe src="" uk-cover></iframe>
</div>
Copy to clipboard
  • <div class="uk-cover-container uk-height-medium">
      <iframe
        src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?autoplay=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;modestbranding=1&amp;wmode=transparent"
        width="1920"
        height="1080"
        allowfullscreen
        uk-cover
      ></iframe>
    </div>

Responsive height

To add responsive behavior to your cover image, you need to create an invisible <canvas> element and assign width and height values to it, according to the aspect ratio you want the covered area to have. That way it will adapt the responsive behavior of the image.

<div class="uk-cover-container">
  <canvas width="" height=""></canvas>
  <img src="" alt="" uk-cover />
</div>
Copy to clipboard
  • <div class="uk-cover-container">
      <canvas width="400" height="200"></canvas>
      <img src="/images/dark.jpg" alt="" uk-cover />
    </div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

OptionValueDefaultDescription
automuteBooleantrueTries to automute the iframe’s video.
widthNumberThe element’s width.
heightNumberThe element’s height.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.cover(element, options);

Theme development

On your tailwind.config.js file, add the Cover component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        cover: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*