Cover

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

FrankenstyleKit (aka Franken UI 3.0) is now available. Support for the current version will gradually wind down. It will continue to work, but using the latest version is recommended for new projects so you can benefit from future updates and enhancements.

Usage
Video
Iframe
Responsive height
Component options
JavaScript
- Initialization

Usage

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

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

Video

To create a video that covers its parent container, add the data-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.

Iframe

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

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.

Component options

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

Option	Value	Default	Description
`automute`	Boolean	true	Tries to automute the iframe’s video.
`width`	Number		The element’s width.
`height`	Number		The element’s height.

JavaScript

Learn more about JavaScript components.