【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない
- 2021.6.25
- jQuery


動画をどーんと表示したいのですができますかー?

できますよー
1.【サンプル】動画を全画面表示にして中央に表示する
動画の上にタイトルを置いてみます。
スクロールできますー。
See the Pen
【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<div class="fit"> <video src="https://125naroom.com/demo/video/itukanokoto_b.mp4" class="fitsize" preload="metadata" playsinline autoplay loop muted><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p></video> <h1>【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない | 125naroom</h1> </div>
CSS
.fit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .fitsize { position: absolute; }
jQuery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
jQuery(function($){ var winH = $(window).height(); //全画面表示の場所を指定する $('.fit').outerHeight(winH); $(window).on('load',function(){ //画像、動画のクラスを決める setBgImg($('.fitsize')); }); $(window).on('resize',function(){ //リサイズ指定 winH = $(window).height(); $('.fit').outerHeight(winH); setBgImg($('.fitsize')); }); function setBgImg(object){ //画像サイズ取得 var imgW = object.width(); var imgH = object.height(); //ウィンドウサイズ取得 var winW = $(window).width(); var winH = $(window).height(); //幅・高さの拡大・縮小率取得 var scaleW = winW / imgW; var scaleH = winH / imgH; //幅・高さの拡大・縮小率の大きいものを取得 var fixScale = Math.max(scaleW, scaleH); //画像の幅高さを設定 var setW = imgW * fixScale; var setH = imgH * fixScale; //画像の位置を設定 var moveX = Math.floor((winW - setW) / 2); var moveY = Math.floor((winH - setH) / 2); //設定した数値でスタイルを適用 object.css({ 'width': setW, 'height': setH, 'left' : moveX, 'top' : moveY }); } });
2.【サンプル】動画を全画面表示にして中央に表示する、固定背景にしておしゃれにしてみる
動画の上にタイトルを置いてみます。
動画を固定背景にして、フッターでも動画をちらりとおしゃれにしてみます。
スクロールすると違いがわかりますー。
See the Pen
【jQuery】動画を全画面表示にして中央に表示する、固定背景にしておしゃれにしてみる by 125naroom (@125naroom)
on CodePen.
コードはこちら
HTML
<div class="bg_statement"> <div class="fit"> <video src="https://125naroom.com/demo/video/itukanokoto_b.mp4" class="fitsize" preload="metadata" playsinline autoplay loop muted><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p></video> </div> </div>
CSS
/*========= .bg_statement(固定背景にする) =========*/ .bg_statement { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; } /*========= .fit =========*/ .fit { position: relative; overflow: hidden; } .fitsize { position: absolute; }
jQuery
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
jQuery(function($){ var winH = $(window).height(); //全画面表示の場所を指定する $('.fit').outerHeight(winH); $(window).on('load',function(){ //画像、動画のクラスを決める setBgImg($('.fitsize')); }); $(window).on('resize',function(){ //リサイズ指定 winH = $(window).height(); $('.fit').outerHeight(winH); setBgImg($('.fitsize')); }); function setBgImg(object){ //画像サイズ取得 var imgW = object.width(); var imgH = object.height(); //ウィンドウサイズ取得 var winW = $(window).width(); var winH = $(window).height(); //幅・高さの拡大・縮小率取得 var scaleW = winW / imgW; var scaleH = winH / imgH; //幅・高さの拡大・縮小率の大きいものを取得 var fixScale = Math.max(scaleW, scaleH); //画像の幅高さを設定 var setW = imgW * fixScale; var setH = imgH * fixScale; //画像の位置を設定 var moveX = Math.floor((winW - setW) / 2); var moveY = Math.floor((winH - setH) / 2); //設定した数値でスタイルを適用 object.css({ 'width': setW, 'height': setH, 'left' : moveX, 'top' : moveY }); } });
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに

おー、これこれー!

動画じゃなくても画像でも使えますよーー
おすすめ
かんれん
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。