Video

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.

Usage

To apply this component, add the data-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="" data-uk-video></video>

Something's not working? Feel free to report an issue or edit this snippet .

<button
  class="uk-margin uk-btn uk-btn-default"
  type="button"
  data-uk-toggle="target: +"
>
  Toggle HTML5 Video
</button>

<video
  class="mt-4"
  src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
  width="1920"
  height="1080"
  controls
  playsinline
  hidden
  data-uk-video
></video>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <button className="uk-margin uk-btn uk-btn-default" type="button" data-uk-toggle="target: +">
    Toggle HTML5 Video
  </button>
  <video className="mt-4" src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width={1920} height={1080} controls playsInline hidden data-uk-video />
</div>

Autoplay

There are two autoplay options to play the video. Just add the autoplay option to the data-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="" data-uk-video="autoplay: inview"></video>
<video src="" width="" height="" data-uk-video="autoplay: hover"></video>

Something's not working? Feel free to report an issue or edit this snippet .

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
  <div>
    <video
      src="https://yootheme.com/site/images/media/yootheme-pro.mp4"
      width="1800"
      height="1200"
      loop
      muted
      playsinline
      data-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
      data-uk-video="autoplay: hover"
    ></video>
  </div>
</div>

Something's not working? Feel free to report an issue or edit this snippet .

<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
  <div>
    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width={1800} height={1200} loop muted playsInline data-uk-video="autoplay: inview" />
  </div>
  <div>
    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width={1800} height={1200} loop muted playsInline data-uk-video="autoplay: hover" />
  </div>
</div>

Automute YouTube or Vimeo

To mute YouTube or Vimeo videos by default, add the data-uk-video="automute: true" attribute to the <iframe> element.

<iframe src="" width="" height="" data-uk-video="automute: true"></iframe>

Something's not working? Feel free to report an issue or edit this snippet .

<button
  class="uk-margin-bottom uk-btn uk-btn-default"
  type="button"
  data-uk-toggle="target: +"
>
  Toggle YouTube Video
</button>

<iframe
  class="mt-4"
  src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1"
  width="1920"
  height="1080"
  allowfullscreen
  data-uk-responsive
  data-uk-video="automute: true"
></iframe>

Something's not working? Feel free to report an issue or edit this snippet .

<div>
  <button className="uk-margin-bottom uk-btn uk-btn-default" type="button" data-uk-toggle="target: +">
    Toggle YouTube Video
  </button>
  <iframe className="mt-4" src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&showinfo=0&rel=0&modestbranding=1&playsinline=1" width={1920} height={1080} allowFullScreen data-uk-responsive data-uk-video="automute: true" />
</div>

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
`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.

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.video(element, options);

On This Page
Usage
Autoplay
Automute YouTube or Vimeo
Component options
JavaScript