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

サンプルページはこちら