비디오

개요

{{< video >}} 숏코드를 사용하면 문서에 비디오를 임베드할 수 있습니다. 예를 들어 다음은 YouTube 영상을 삽입한 예시입니다.

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

비디오는 동영상 파일(예: .mp4)이거나 YouTube, Vimeo, Brightcove와 같은 서비스의 링크일 수 있습니다.

다음은 다양한 비디오 소스와 옵션을 사용하는 추가 예시입니다.

{{< 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" 
>}}

HTML 형식에서는 비디오가 문서 안에 임베드됩니다. 다른 형식에서는 비디오에 대한 간단한 링크가 렌더링됩니다.

이제 비디오 임베딩에 사용할 수 있는 옵션을 살펴보겠습니다. Revealjs 프레젠테이션에서 비디오를 사용하는 방법(전체 화면 배경 등)에 대한 자세한 내용은 아래 Revealjs 섹션을 참고하세요.

비디오 URL

비디오 URL은 문서 옆에 있는 동영상 파일 경로(예: .mp4), 원격 동영상 파일 URL, 또는 YouTube/Vimeo/Brightcove 같은 서비스 URL을 사용할 수 있습니다.

다음은 동영상 파일 URL 예시입니다.

{{< video local-video.mp4 >}}
{{< video https://videos.example.com/video.mp4 >}}

비디오 서비스 URL도 다양한 형식을 지원합니다.

{{< 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 >}}

YouTube는 시청 중 주소창 URL과 표준 링크/임베드 URL을 모두 지원합니다. Brightcove는 표준 iframe 임베드 코드를 사용합니다.

옵션

종횡비

비디오는 기본적으로 본문 열의 전체 폭을 사용해 반응형으로 렌더링됩니다. aspect-ratio는 너비가 변할 때 높이가 어떻게 변해야 하는지를 지정합니다.

{{< video https://youtu.be/wo9vZccmqwc aspect-ratio="4x3" >}}

사용 가능한 종횡비는 1x1, 4x3, 16x9(기본값), 21x9입니다.

폭과 높이

width, height 속성을 명시하면 반응형 크기 조정을 비활성화할 수 있습니다.

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

이렇게 하면 지정한 크기로 렌더링되며 반응형으로 조정되지 않습니다. 폭이나 높이를 지정하지 않으면 사용할 수 있는 공간에 맞춰 반응형으로 크기가 조정됩니다.

시작 시간

YouTube 영상의 경우 start 옵션으로 몇 초 지점부터 재생할지 지정할 수 있습니다.

{{< video https://youtu.be/wo9vZccmqwc start="10" >}}

프레임 제목

title 옵션은 비디오 <iframe>에 title 속성을 추가합니다.

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

Revealjs

Revealjs 프레젠테이션에서는 두 가지 방식으로 비디오를 포함할 수 있습니다.

슬라이드 내용 안에 비디오를 넣기
슬라이드 전체 배경으로 비디오를 사용하기

슬라이드 콘텐츠

제목이 없는 슬라이드에 비디오를 추가한 예시는 다음과 같습니다.

---

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

비디오가 슬라이드를 꽉 채우도록 width, height를 100%로 설정했습니다.

제목이 있는 슬라이드 예시는 다음과 같습니다.

## Video Slide 

{{< video https://youtu.be/wo9vZccmqwc width="100%" height="85%" >}}

제목 공간을 확보하기 위해 height를 85%로 지정했습니다.

배경

제목 없는 슬라이드에는 비디오로 배경 전체를 채우는 편이 좋을 때가 있습니다. 이때 background-video 속성을 사용합니다.

## {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"}

비디오 파일(.mp4 등)을 background-video로 사용할 때는 여러 속성을 추가로 지정할 수 있습니다.

속성	기본값	설명
`background-video`		단일 비디오 소스 또는 쉼표로 구분된 비디오 소스 목록.
`background-video-loop`	false	비디오를 반복 재생할지 여부.
`background-video-muted`	false	오디오를 음소거할지 여부.
`background-size`	cover	`cover`는 전체 화면과 일부 크롭, `contain`은 레터박스.
`background-opacity`	1	배경 비디오의 투명도(0~1). 0은 투명, 1은 완전 불투명.

예:

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

이 슬라이드의 배경 비디오는 오디오가 음소거된 상태로 반복 재생됩니다.

상호 참조

비디오에 크로스레퍼런스를 추가하려면 크로스레퍼런스 Div 문법을 사용하고, 그림과 동일하게 취급하면 됩니다. 예:

::: {#fig-cern}

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

The video "CERN: The Journey of Discovery"

:::

In @fig-cern...

렌더링 결과는 다음과 같습니다.

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

비디오에 그림과 다른 레이블·번호 체계를 사용하고 싶다면 사용자 정의 크로스레퍼런스 타입을 정의해 보세요.