video_tagで横幅いっぱいに動画を挿入する方法

#はじめに
video_tagで横幅いっぱいに自動再生で動画を流す。
備忘録として残します。

#つまずいたところ

• 動画のファイルの置所
• 自動再生
• 横幅を画面いっぱい、縦幅は指定

#実装手順
app/assetsの直下にvideosフォルダを作成。
videosフォルダ内に背面で流したい動画を入れる。
(ここでは、test_video.mp4という動画ファイルを入れました。)

次にvideo_tagを使って動画を表示

index.html.haml

.video-content
  = video_tag "test_video.mp4", loop: true, autoplay: true, muted: true

object-fit: cover;をつけることで、動画の横と縦の比率を変更できた。
動画も崩れないで再生されている。

index.scss

.image-content{
  height: 80vh;
  z-index: 1;
  video{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

背面に動画を入れたい時は、position: absolute;などで調整してください。

#videoタグの属性説明

属性	説明
poster	動画が再生されていない時に表示させる画像をパスで指定
autoplay	ページのロードが完了したら自動的に動画を再生する
loop	動画を繰り返すループ再生を許可する
controls	再生ボタンやタイムラインなどのインターフェースパーツを表示させる
muted	音声付き動画データの場合は消音にする
preload	事前に動画データを読み込むか制御する、属性の値で指定する 【auto】初期値でページロードと合わせて読み込みされる 【none】動画データの読み込みがされない状態 【metadata】動画データのメタデータのみ読み込みされる