【HUGO】Youtube動画を秒数指定で埋め込む方法

ショートコードを使った埋め込みで秒数指定がしたい

HUGOにはビルトインショートコードとして、youtube動画を埋め込むショートコードが用意されています。

ショートコードを利用して埋め込む際に秒数指定がしたい場合の方法を紹介します。

独自にショートコードを作ろう

秒数指定をして動画を埋め込むには、動画IDの後ろにstartパラメーターを付与する必要があるのですが、HUGOのビルトインショートコードはstartパラメーターに対応していないようです。

なので、独自のショートコードを作ることで対応します。

{{- $id := .Get "id" -}}
{{- $title := .Get "title" -}}
{{- $start := .Get "start" -}}

{{- if not $id -}}
  {{ errorf "missing value for param 'id': ％s" .Position }}
{{- end -}}

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="https://www.youtube.com/embed/{{$id}}?start={{$start}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen=""  title="{{$title}}"></iframe>
</div>

直接埋め込んだらダメなの？

ショートコードを作るよりもYoutube側で時間指定した埋め込みコードを生成して直接貼り付けたらダメなの？と思うかもしれませんが、直貼りには1つ問題があります。

直貼りの場合、youtube側で生成されるコードがレスポンシブ対応していないので、独自に埋め込み動画にスタイルを適用してやらないと表示が乱れます。

このあたりは使用しているテーマによって異なるかもしれません。 （私はanankeをベースにしており直貼りはスマホ版で表示が乱れました。）