How to embed video in hugo

한줄요약 : Hugo로 만든 blog 에서 video 파일을 지원하려면 shortcode를 활용한다.

아래 shortcode는 mp3, mp4 파일을 지원하는 zen에서 사용하는 shortcode(zen/layouts/shortcodes/video.html)

<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
<video controls preload="{{ .Get "preload" | default "metadata" }}" {{ with .Get "width" }}width="{{ . }}"{{ end }}>
{{ with .Get "src" }}<source src="{{ .  | relURL }}" type="video/mp4">{{ end }}
</video>
{{ with .Get "caption" }}<figcaption>{{ . }}</figcaption>{{ end }}
</figure>

이 파일을 hugo site의 layouts/shortcodes 디렉토리에 복사하고 md 파일에서 다음과 같이 작성한다.

특별한 처리를 하지 않는 이상 Web browser 가 지원하는 표준(?) video 재생 기능을 사용하기에, mp4 파일은 지원되지만 mov 파일은 지원되지 않는다고 한다. Embedding local video in static/img or page folder to website

실제로 shortcode를 이용해서 작성한 md 파일에서 만들어진 HTML 페이지를 보면 다음과 같다.

<figure >
<video controls preload="metadata" >
<source src="/images/2020/06/20200606_1634_IMG_4080.MP4" type="video/mp4">
</video>

</figure>

즉 그냥 content type(media type이라고 하는 건가?)를 video/mp4라고 지정하고 그 파일의 위치를 src 태그로 지정하는 형태. video/mp4는 브라우저 설정 등에서 봤던 기억이 있는데… 잘 모르지만 그래서 이 type의 파일은 브라우저가 알아서 지원해주는 거라고 추정된다.

Shortcodes에 대한 내용은 Create Your Own Shortcodes 를 참고하고.

덕분에 이제 MP4 파일도 마음대로 blog에 추가할 수 있게 되었다는.