【Railsでhamlに動画を挿入する方法】

2336 ワード
Ruby Rails haml 動画 Ruby テキストリンク

動画が挿入できると、webサイトをお洒落でカッコよく装飾できます。
今回はRailsでhamlに動画を挿入する方法を詳しく解説していきます。

publicフォルダにvideosフォルダを作成

テキストエディタで新しいフォルダを作成をクリックし、public下にvideoフォルダを作成します。

videoフォルダ下に挿入したい動画ファイルを入れる

使用したい動画ファイルをvideoフォルダ下に持ってきます。

この時、動画ファイルの拡張子はmp4を使用してください！
なぜなら、現在mp4をほとんどのブラウザが対応しているからです。
今回は拡張子mp4のファイル、sample_video.mp4を用います。

hamlに以下を記述

◯◯.html.haml
= video_tag("/videos/sample_video.mp4", autoplay: true, loop: true, muted: true, class: 'video')

1つずつ解説していきます。
= video_tag
ビデオタグを用いて動画ファイルを呼び出すことが可能になります。

/videos/sample_video.mp4
参照するフォルダを指定します。

autoplay: true
ページ更新時に自動的に再生させることが可能になります。

loop: true
動画終了時に、初めから繰り返し再生してくれます。

muted: true
無音で再生されます。

すると、このように動画がwebサイトに表示されます！

今回のように、classを指定すればscssにて動画のレイアウトを変更することも可能です！

終わりに

動画挿入は比較的に簡単でしたが、初めてだったので動画作成するのに時間がかかりました笑
動画はMacのiMovieで作成しました！

注意点として、
動画ファイルの容量が大きすぎると表示がされなかったのでなるべく小さく保存してください。

お洒落でかっこいいwebサイト作成のために、ぜひこの記事を参考に動画を挿入してみてください！

参考にした記事
【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ(サイトはHTML表記）
https://webliker.info/52510/