[Rails]動画を埋め込む方法

背景

アプリ制作中に動画を埋め込みたいと考え調べたところ主に２つのやり方が出てきたので備忘録として記載する。

videoタグを使用する場合

videoタグは、mp4やwebmなどの動画ファイルを読み込むことで動画を表示します。

書き方

<video src="video.mp4" 属性></video>

様々な属性を付与することで多様な実装が可能になります。

属性一覧

controls：コントロールパネルを表示する

再生ボタンや再生位置（シーク）、ボリュームなどのコントロールパネルを表示することができる。

<video src="video.mp4" controls></video>

auto：自動再生する

auto属性を指定することで動画を自動再生できる。ただ、chromeやsafariではmuted属性で動画の音をでないように設定する必要があります。

<video src="video.mp4" autoplay muted></video>

playsinline：インライン再生する

全画面表示をせずにその場で再生させることができる。
インライン再生するためには「autoplay」、「muted」、「playsinline」の３つの属性が必須です。

<video autoplay muted playsinline src="https://××××××.mp4"></video>

loop：繰り返し再生

動画を自動で繰り返し再生させる。

<video src="sample-video.mp4" loop autoplay muted></video>

ブートストラップを使う場合

ルールは 「iframe」, 「embed」, 「video」, 「object」 要素に直接適用される。別の属性のスタイルに合わせる場合は、オプションで明示的な子孫クラス .embed-responsive-item を使用。

<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..." allowfullscreen></iframe>
</div>