【rails入門】videoタグを使って背景に動画を埋め込む方法

本記事ではプRails学習者の方を対象にrails内でvideoタグを使用して背景に動画を埋め込む方法について書いていきます。

完成品

htmlとcssでもvideoタグを使って背景に動画を設定することができますが、今回、railsで実装してしまったので記事のベースはrailsになっています。
html,cssのvideoタグの知識をrailsに応用すれば実装出来るので、簡単に背景に動画を埋め込むことができます。

完成品は以下のような感じになります。

背景に動画を埋め込むwebサイトを多く見かける機会が増えたので、実際にRails試してみましょう。

動画のフリー素材サイト

無料の動画素材を提供するサイトは多くありますが、今回、二つ紹介したいと思います。

Pexels Videos

Pixabay

どちらの動画素材サイトも無料でダウンロードして使用することができます。
クレジット登録の必要もなしで、商用目的で利用することも可能です。
皆さんも良ければ、利用してみてください。

動画を背景に埋め込む方法

1,ダウンロードした動画を
public/assets/videos/の配下に保存します。

2,videoタグを配置。

<%= video_tag("/assets/videos/memoryofawoman.mp4", :autoplay => true, :loop => true, muted: => true, style: "width:100%;") %>

設定した内容を確認してみます。

• autoplay => true 自動再生を有効
• loop => true 繰り返し再生
• muted: => true 音を出さないように指定

railsで動画を埋め込みをする際にmuted: :trueを設定しないと背景動画が自動再生されないようなので、忘れずに設定しておきましょう。

railsのドキュメントを参照していただければ、videoタグに対して様々な設定をすることが可能ですので、参考にしてみてください。

video_tag – リファレンス – – Railsドキュメント

関連記事