YouTube動画の埋め込みHTMLとCSS [レスポンシブ対応]

投稿 2200文字

Hugo CSS

YouTube 公式の埋め込みタグは、標準では横幅 560x 縦 315 で固定されています。横幅 1 に対して縦が 0.5625 の比率ですね。これでは、表示しているパソコンなどの画面幅が大きい時には動画は小さくなるし、かたやスマホなどの小さい画面幅の時には動画がはみ出てしまいますし、イマイチです。

ブログ記事に YouTube 動画をちょうどいい感じ（程よいサイズ）で埋め込みたかったのでやり方をまとめました。この記事では以下の 2 点を説明します。

  • ブログや自サイトに YouTube の動画を埋め込む際に、パソコンとスマホ両方で画面幅を効率よく使うための HTML と CSS のコードが分かる
  • （任意）サイトの生成に静的サイトジェネレーターの Hugo を利用している場合は、ショートコードの使い方がわかる

完成版コード（HTML と CSS）

最初に結論として完成版のコードを記載します。このあとに解説します。

HTML

<div class="youtube-wrapper">
  <div class="youtube">
    <iframe
      loading="lazy"
      src="https://www.youtube.com/embed/xxxxxxxx"
      allowfullscreen
      title="YouTube video player"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    >
    </iframe>
  </div>
</div>

CSS

.youtube-wrapper {
  max-width: 800px; /* ご自身のサイトデザインに応じて調整してください */
}

.youtube {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media screen and (max-width: 768px) {
  .youtube-wrapper {
    /* スマホなどの少画面サイズ向けの個別設定 */
  }
}

YouTube 埋め込み方法の解説

YouTube 公式の埋め込みタグを確認してみましょう。（2022/01/09 現在）

（図 YouTube埋め込みタグを生成する画面）

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/{{動画のID}>"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

注目は、

<iframe
  width="560"
  height="315"
  ... 中略
>

これが問題となる画面サイズの指定です。

今回、 iframe タグからは 横幅（width）と縦長（height）の指定を取り除いて、CSS で調整するようにします。

大きくは 2 階層の div タグで囲います。

  • youtube-wrapper 外枠：動画そのものの全体の大きさ（最大サイズ）を指定
    • 今回は max-width: 800px; として最大幅を指定する形で丁度良く収まりました
    • 内枠では width: 100% として横幅目一杯広がりますので、動画枠が大きくなりすぎないように mad-width で抑えつけます
  • youtube 内枠：動画ウィンドウの縦横比率など細部を設定
<!-- 動画そのものの全体の大きさ（最大サイズ）を指定 -->
<div class="youtube-wrapper">
  <!-- 動画ウィンドウの縦横比率など細部を設定 -->
  <div class="youtube">
    <iframe><!--中略--></iframe>
  </div>
</div>

適用した結果はこうなります。パソコンやスマホで見比べてみてください。（後日注：上に示している画像の動画が削除されてしまったので適当なものに置き換えました）

iframe 属性情報の解説

<iframe
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
>

</iframe>

この記載はあまり見慣れないので調べてみます。技術ドキュメントの記載をそのままいんようするため堅い表現ですが、ここではおおよそ把握できればよい考えです。

<iframe>: インラインフレーム要素 - HTML: HyperText Markup Language | MDN

allow
機能ポリシーを <iframe> に指定します。このポリシーは、 <iframe> が利用可能な機能をリクエストのオリジン (例：マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど) に基づいて定義します
詳細と例については、機能ポリシーの使用 > iframe の allow 属性を参照してください。

属性名 意味
accelerometer 現在の文書が、端末の加速度に関する情報を、 Accelerometer (en-US) インターフェイスを通じて収集することを許可するかどうかを制御します。
autoplay 現在の文書で HTMLMediaElement インターフェイスがメディアの自動再生をリクエストすることを無効にするかどうかを制御します。
clipboard-write (意訳)クリップボードへの書き込みを可能にする https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write
encrypted-media 現在の文書が Encrypted Media Extensions (en-US) API (EME) を使用することを許可するかどうかを制御します。
gyroscope 現在の文書が Gyroscope (en-US) インターフェイスを通じて、端末の方向に関する情報を収集することを許可するかどうかを制御します。
picture-in-picture 現在の文書が、該当する API を使用して Picture-in-Picture モードで動画を再生することを許可するかどうかを制御します。

参照 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Feature-Policy#directives

Hugo テンプレートの場合

ここまでの説明で既にやりたいことは解決しています。

ここからは、静的サイトジェネレーターの Hugo を使っている方向けの説明です。

Hugo では Shortcode（ショートコード）と呼ばれる形式で独自のタグを設けることが出来ます。

{{<youtube “DHlOZINrdio”>}}

{{- $ytHost := "www.youtube.com" -}}
{{- $id := .Get "id" | default (.Get 0) -}}
<div class="youtube-wrapper">
    <div class="youtube">
    <iframe loading="lazy"
            src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}"
            allowfullscreen
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    >
    </iframe>
    </div>
</div>

Hugo には様々なサイトテンプレート（デザインテーマ）がありますので、お使いのものによって事情は少し異なります。 テーマの方がより優秀なコードを用意しているかもしれませんので、安易に上書きをせずに確認してみてください。

独自のものがある場合は、themes/テーマ名/layouts/shortcodes に格納されていると思います。

本家 Hugo が提供しているコードとの比較

2022/1/9 現在、Hugo 内蔵のテンプレートコードは以下の通りです。（一部改行を入れて整形しています）

hugo/youtube.html at master · gohugoio/hugo （最新コードはこちら https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/youtube.html）

{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
{{- if not $pc.Disable -}}
  {{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
  {{- $id := .Get "id" | default (.Get 0) -}}
  {{- $class := .Get "class" | default (.Get 1) -}}
  {{- $title := .Get "title" | default "YouTube Video" }}
  <div
    {{ with $class }}class="{{ . }}"
    {{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}
  >
    <iframe
      src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}"
      {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}
      allowfullscreen
      title="{{ $title }}"
    >
    </iframe>
  </div>
{{ end -}}

参照

この記事の執筆にあたり、以下の記事を参考にさせていただきました。

Web サイトに YouTube 動画を表示する：基本編 | 株式会社グランフェアズ