We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Expand images, videos or iframes to cover their entire container and place your own content on top.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js
file, add the Cover component
within the ui()
plugin.
import ui from "franken-ui";
ui({
components: {
cover: {
hooks: {}
}
}
}),
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.
<div class="uk-cover-container uk-height-medium">
<img src="/images/dark.jpg" alt="" uk-cover />
</div>
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>
<div class="uk-cover-container uk-height-medium">
<video
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
autoplay
loop
muted
playsinline
uk-cover
></video>
</div>
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>
<div class="uk-cover-container uk-height-medium">
<iframe
src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?autoplay=1&controls=0&showinfo=0&rel=0&loop=1&modestbranding=1&wmode=transparent"
width="1920"
height="1080"
allowfullscreen
uk-cover
></iframe>
</div>
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>
<div class="uk-cover-container">
<canvas width="400" height="200"></canvas>
<img src="/images/dark.jpg" alt="" uk-cover />
</div>
Learn more about using hooks.
Hook Name | Affected Classes |
---|---|
hook-misc | * |
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. |
Learn more about JavaScript components.
UIkit.cover(element, options);