ビデオ／Video

動画を表示するためのコンポーネントです。動画はYoutubeのEmbedによって再生されます。
「Speaker Deck」などのスライドをEmbedで埋め込むことも可能です。
再生前の状態ではサムネイルが表示されます。


<div class="c-video">
  <div class="c-video__inner">
    <iframe
      src="https://www.youtube.com/embed/Kd7aNwrVlMM"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen=""
    ></iframe>
  </div>
  <div class="c-video__caption">動画のキャプション</div>
</div>

原則

再生前のサムネイルのサイズおよび、再生領域は16:9で表示されます。
使用する動画は基本的に16:9の比率を推奨します。
サムネイルが設定されていることを推奨します。
表示サイズは画像コンポーネントと同一の基準とします。

パターン

表示サイズ

表示サイズの指定が可能です。

Sサイズ

<div class="c-video c-video--sizeS">
  <div class="c-video__inner">
    <iframe
      src="https://www.youtube.com/embed/Kd7aNwrVlMM"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen=""
    ></iframe>
  </div>
  <div class="c-video__caption">動画のキャプション</div>
</div>

Mサイズ


<div class="c-video c-video--sizeM">
  <div class="c-video__inner">
    <iframe
      src="https://www.youtube.com/embed/Kd7aNwrVlMM"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen=""
    ></iframe>
  </div>
  <div class="c-video__caption">動画のキャプション</div>
</div>

Lサイズ


<div class="c-video c-video--sizeL">
  <div class="c-video__inner">
    <iframe
      src="https://www.youtube.com/embed/Kd7aNwrVlMM"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen=""
    ></iframe>
  </div>
  <div class="c-video__caption">動画のキャプション</div>
</div>