文系エンジニア大学生の技術ブログ

社会が多様化していく中、大学生の学生生活も多様であるべきと考えています。主にエンジニア向けにITやプログラミングなどの技術系と大学生向けに休学、留学、海外生活、トビタテ留学、長期インターンに関する記事を書いています。

【rails】videoタグを使って背景に動画を埋め込んでみたよ

f:id:daikiyano:20181127200740p:plain

今回は、プログラミングを学習されている方を対象にrails内でvideoタグを使い背景に動画を埋め込む方法についてご紹介します。

完成品

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

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

今日からtwitterアカウント開設したので、もし良かったらフォロー宜しくお願いします。

最近、背景に動画を埋め込むwebサイトを多く見かけるので、私も試したいと思い実装することにしました。

動画のフリー素材サイト

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

Pexels Videos

videos.pexels.com

Pixabay

pixabay.com

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

railsで動画を背景に埋め込んでみるよ。

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ドキュメント