動画を背景いっぱいに表示。レスポンシブかつ中央配置に。JS】webサイトで背景動画を画面いっぱいに表示。動画を背景いっぱいに表示してるサイト結構ありますよね。レスポンシブ対応もしてるんですが、画面幅を縮めると片方が見切れてしまったり、高さを縮めると上の方が見切れたり。それはそれでいいんでしょうけど、中には縦横センターに動画を配置して欲しいってクライアントさんがいらっしゃいます。これをやろうとして色々探したんですが、横方向のセンターだけっていう情報は出てくる。縦横中央配置となると途端に情報が少なくなっちゃうんですよね。これ困っている人いるかなと思うので自分が対応したやり方を共有します。video-resizeをダウンロード今回はvideoタグを使って背景動画を実現したんですが、いかんせんvideoタグ自体はあんまり優秀じゃないんですよね。リサイズ部分を助けてくれるプラグインをダウンロードします。このプラグインを使うと縦横の中央配置をいい感じに実現してくれます。このように画面のサイズを変えても縦横中央に配置しつつレスポンシブ対応をしてくれます。githubからどうぞ。https://github.com/robertjanes/video-resizeダウンロードするといくつかのファイルがありますが、解答したファイルの中にある『video-resize.min.js』を使います。このファイルをjsなどを入れてあるフォルダにアップロードして読み込む設定をしましょう。src="/js/video-resize.min.js"></script>これでまずは準備が出来ました。video-resizeを使う詳しい使い方はgithubにも記載されてますがこのサイトでも簡単に説明しておきます。こちらのスクリプトを記載します。//コンテナ内のビデオの位置を定義。0.5}中央に表示されるビデオになります。//画面幅がmobileBreak値のものよりも小さいデバイスに表示される画像。//モバイルレイアウトの最大画面幅を決定します。mobilePostersourceを使用して静的にレンダリングされます。</script>必要そうな補足は書いたつもりなので、みなさんの環境によってパスなどを書き換えてください。記述したスクリプトを呼び出す場所にこちらの記述をしましょう。id="airhorn"></video>自分のケースではさらに動画の荒さをごまかすために動画の上にドット画像を敷いたり諸々CSSでの調整はしましたが、基本的な使い方は同じだと思います。jQueryjQueryで外部リンクを自動判別して[target=”_blank”]とクラスを付与する方法CONTACTご意見やご感想、お仕事のご依頼などお気軽にご連絡ください。