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.
Start playing videos as they are shown or enter the viewport.
The Video component offers two advanced functions for videos. First, it allows you to pause a video whenever it’s hidden with CSS and resume playing once it becomes visible again. In addition, the video can pause when it’s outside the viewport and start playing when entering it.
Secondly, it allows you to mute YouTube and Vimeo videos, which is often needed if they are used as the background of a section.
For example, the Slideshow, Lightbox and Cover components inherit and make use of both functions.
To apply this component, add the uk-video
attribute to a <video>
element. The video will be paused whenever it’s hidden with CSS and resume once it becomes visible again.
<video src="" width="" height="" uk-video></video>
<button
class="uk-button uk-button-default uk-margin"
type="button"
uk-toggle="target: +"
>
Toggle HTML5 Video
</button>
<video
src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
width="1920"
height="1080"
controls
playsinline
hidden
uk-video
></video>
There are two autoplay options to play the video. Just add the autoplay
option to the uk-video
attribute and apply one of these values.
Values | Description |
---|---|
inview | Play video when it enters the viewport and pause it again when it leaves the viewport. |
hover | Play video when the mouse hovers the video and pause it again when the mouse leaves the hover. |
<video src="" width="" height="" uk-video="autoplay: inview"></video>
<video src="" width="" height="" uk-video="autoplay: hover"></video>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<video
src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
width="1800"
height="1200"
loop
muted
playsinline
uk-video="autoplay: inview"
></video>
</div>
<div>
<video
src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
width="1800"
height="1200"
loop
muted
playsinline
uk-video="autoplay: hover"
></video>
</div>
</div>
To mute YouTube or Vimeo videos by default, add the uk-video="automute: true"
attribute to the <iframe>
element.
<iframe src="" width="" height="" uk-video="automute: true"></iframe>
<button
class="uk-button uk-button-default uk-margin-bottom"
type="button"
uk-toggle="target: +"
>
Toggle YouTube Video
</button>
<iframe
src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&showinfo=0&rel=0&modestbranding=1&playsinline=1"
width="1920"
height="1080"
allowfullscreen
uk-responsive
uk-video="automute: true"
></iframe>
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more
Option | Value | Default | Description |
---|---|---|---|
autoplay | Boolean, String | true | The video automatically plays/pauses as it’s visible/hidden on the page. Additionally, the video can play when its in the viewport or hovered with the mouse (inview , hover ). |
automute | Boolean | false | Automatically mute YouTube or Vimeo videos. |
autoplay
is the Primary option, and its key may be omitted if it’s the only option in the attribute value.
Learn more about JavaScript components.
UIkit.video(element, options);