8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

背景

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

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」の3つの属性が必須です。

<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>
8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?