簡単にサイト背景に動画を設置する方法こんにちは。ジップサービスでデザイナーをしているものです。今回は背景に動画を設置する比較的簡単な方法をご紹介しようと思います。背景動画がポピュラーになったのは既に数年前の話ではありますが、まだまだ需要はありそうです。背景動画の参考サイトということで、説明に入る前にまずは背景動画が実際に使われているサイトを紹介したいと思います。6.完成Re:creationhttps://re-creation.co.jp/動画そのものがとても素敵です。都会的なイメージとカラーバランスで未来感が漂います。CROSSBACKYARD.COMhttps://crossbackyard.com/事業内容が瞬時に伝わってきます。人にフォーカスを当てていて親近感を覚えます。AbemaTVhttps://recruit.abematv.co.jp/映像配信サービスならではのハイクオリティーです。チャンネルの豊富さと運営側の情熱が瞬時に伝わります。参考になる背景動画サイトを紹介させてもらったところで制作方法の説明に入ります。今回はbideo.jsというスクリプトを使って実装するパターンを紹介いたします。bideo.jsはレスポンシブ対応の単体で動作する軽量スクリプトです。Github」をクリックします。Githubに推移しますので、上記の手順でダウンロードします。2.スクリプトの読み込みダウンロードしたzipファイルを解凍し、中にある「bideo.js」と「main.js」を読みます。‘video/top.mp4’,」の行を自身が設定した動画ファイルに変更します。該当箇所に記述します。autoplay></video>今回デモとして下記のhtmlを作成しました。動画設置に必要なスタイルを記述してます。18px;}※各々の環境に併せて変更してください6.完成デモサイトまとめ今回は簡単に背景動画を実装できる方法を紹介させていただきました。動画を使ったアプローチは、まだまだ需要がありそうです。Reserved.Top。