Videos

Quarto v1.2 Required

Support for videos is a feature of Quarto v1.2. If you want to use this feature please download and install Quarto v1.2 before proceeding.

Overview

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

{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}

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 https://www.youtube.com/embed/wo9vZccmqwc >}}

{{< video https://vimeo.com/548291297 >}}

{{< video https://youtu.be/wo9vZccmqwc width="400" height="300" >}}

{{< video https://www.youtube.com/embed/wo9vZccmqwc
    title="What is the CERN?"
    start="116"
    aspect-ratio="21x9" 
>}}

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 https://videos.example.com/video.mp4 >}}

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

{{< video https://youtu.be/wo9vZccmqwc >}}
{{< video https://www.youtube.com/watch?v=wo9vZccmqwc >}}
{{< video https://www.youtube.com/embed/wo9vZccmqwc >}}
{{< video https://vimeo.com/548291297 >}}
{{< video https://players.brightcove.net/1460825906/default_default/index.html?videoId=5988531335001 >}}

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.

Options

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 https://youtu.be/wo9vZccmqwc 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 https://youtu.be/wo9vZccmqwc width="250" height="175" >}}

This will produce a video that redners 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 https://youtu.be/wo9vZccmqwc start="10" >}}

Frame Title

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

{{< video https://www.youtube.com/embed/wo9vZccmqwc 
    title='What is the CERN?' 
>}}

Revealjs

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 https://youtu.be/wo9vZccmqwc 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 https://youtu.be/wo9vZccmqwc width="100%" height="85%" >}}

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

Backgrounds

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="https://videos.example.com/intro-cern.mp4"}

## {background-video="https://youtu.be/wo9vZccmqwc?autoplay=1"}

## {background-video="https://vimeo.com/548291297"}

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.