3
1

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

トップページの背景を画像から動画にしようと思い実装していたら、ハマりました。

##video_tagを使う

index.html.erb
<%= video_tag("/videos/top-video.mp4", autoplay: :true, loop: :true, muted: :true, class: 'video-content') %>

###ひとつひとつ見ていく

"/videos/top-video.mp4"
#/assets/videos/埋め込む動画

autoplay: :true
#ページ更新時に自動再生

loop: true
#繰り返し再生

muted: true
#無音になる railsではこの設定をしないといけないらしい

class: 'video-content'
#クラス名の指定

video_tagは初めて使ったのですが、中身は問題なさそう。
基本的には、これで行けると思っていました。
が、ブラウザでみると全く動画が現れない。

拡張子をmp4からwebmにコンバーターで変換して再度試してみたり、VSエディタで動画ファイルをみようとすると文字化けするのでVSエディタの拡張機能を色々調べてたら、時間が過ぎ去りました。

結論からいうと、動画ファイルを置く場所がダメだったみたい。
画像とと同じノリで、app/assets/video(自作)/#動画ファイルだとダメでした。
public/videos/top-video.mp4のように、publicさんの元におかしていただければ、反映されました!!!

ちなみに、public/assets(自作)/videos(自作)/top-video.mp4では、ダメだったので気をつけてください。

以下参照サイト
Railsでhamlファイルに動画を埋めこむ
【rails】videoタグを使って背景に動画を埋め込んでみたよ
背景に動画を使ったWebサイトの作り方 | Webクリエイターボックス

3
1
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
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?