You can embed videos in documents using the {{< video >}} shortcode. For example, here we embed a YouTube video:

{{< video >}}

Videos can refer to video files (e.g. .mp4) or can be links to videos published on YouTube, Vimeo, or Brightcove.

Here are some additional examples that demonstrate using various video sources and options:

{{< video local-video.mp4 >}}

{{< video >}}

{{< video >}}

{{< video width="400" height="300" >}}

{{< video
    title="What is the CERN?"

In HTML formats the video will be embedded within the document. For other formats, a simple link to the video will be rendered.

Next, we’ll cover the various options available for video embedding. For additional details on using videos within Revealjs presentations (including how to create slides with full-screen video backgrounds), see the Revealjs section below.

Video URL

The video URL can specify either a path to a video file (e.g. a .mp4) alongside the document, a remote URL to a video file, or a URL to a video service (YouTube, Vimeo, or Brightcove).

These are valid URLs for video files:

{{< video local-video.mp4 >}}
{{< video >}}

For video services, a variety of URL forms are supported. For example, the following video service URLs are all valid:

{{< video >}}
{{< video >}}
{{< video >}}
{{< video >}}
{{< video >}}

Note that YouTube videos support both the URL that is available in the address bar when watching a video as well as the standard URLs used for linking and embedding. Brightcove videos are embedded using the standard iframe embed code.


Aspect Ratio

Videos are automatically rendered responsively using the full width of the document’s main text column. The aspect-ratio specifies how the height should vary with changes in width. For example:

{{< video aspect-ratio="4x3" >}}

Available aspect ratios include 1x1, 4x3, 16x9 (the default), and 21x9.

Width and Height

You can disable responsive sizing by providing explicit width and height attributes. For example:

{{< video width="250" height="175" >}}

This will produce a video that renders at the specified dimensions and is not responsive. Note that when no height or width are specified, videos will size responsively given the space available to them.

Start Time

For YouTube videos, you can specify a start option to indicate how many seconds into the video you want to start playing:

{{< video start="10" >}}

Frame Title

The title option adds a title attribute to the video <iframe>:

{{< video 
    title='What is the CERN?' 


You can include videos within Revealjs presentations in one of two ways:

  • A video that appears within the contents of a slide.

  • A video that occupies the entire background of a slide.

Slide Content

Here’s a video on a slide without a title:


{{< video width="100%" height="100%" >}}

Note that we set the width and height explicitly to 100% so that the video fills the slide.

Here’s a video on a slide with a title.

## Video Slide 

{{< video width="100%" height="85%" >}}

Note that we set the height to 85% to leave room for the title.


For videos on slides without titles, you might prefer to have the video fill the entire background of the slide. You can do this using the background-video attribute. For example:

## {background-video="intro-cern.mp4"}

## {background-video=""}

## {background-video=""}

## {background-video=""}

Note that when using background-video for video files (as distinct from services like YouTube) you can specify a number of other attributes, including:

Attribute Default Description
background-video A single video source, or a comma separated list of video sources.
background-video-loop false Flags if the video should play repeatedly.
background-video-muted false Flags if the audio should be muted.
background-size cover Use cover for full screen and some cropping or contain for letterboxing.
background-opacity 1 Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque.

For example:

## Slide Title {background-video="video.mp4" background-video-loop="true" background-video-muted="true"}

This slides's background video will play in a loop with audio muted.


To add a cross-reference to a video, use the cross-reference div syntax and treat it like a figure. For example,

::: {#fig-cern}

{{< video >}}

The video "CERN: The Journey of Discovery"


In @fig-cern...

Which renders as:

Screenshot that shows a YouTube video followed by the caption, 'Figure 1: The video CERN: The Journey of Discovery'. Below the caption is the text 'In Figure 1 ...'.

If you would rather give videos a label and counter distinct from figures, consider defining Custom Cross-Reference Types.