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

【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない
動画をどーんと表示したいのですができますかー?
できますよー

【サンプル】動画を全画面表示にして中央に表示する

動画の上にタイトルを置いてみます。
スクロールできますー。

See the Pen 【jQuery】動画を全画面表示にして中央に表示する、スマホでも崩れない by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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

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
        });
    }
});

【サンプル】動画を全画面表示にして中央に表示する、固定背景にしておしゃれにしてみる

動画の上にタイトルを置いてみます。
動画を固定背景にして、フッターでも動画をちらりとおしゃれにしてみます。
スクロールすると違いがわかりますー。

See the Pen 【jQuery】動画を全画面表示にして中央に表示する、固定背景にしておしゃれにしてみる by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

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

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の日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

さいごに

おー、これこれー
動画じゃなくても画像でも使えますよー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)