ビデオフルスクリーンビデオの背景はさまざまな解像度に適応します

要件：

ビデオを提供するとき、最初の画面は画面全体をカバーし、さまざまな解像度に適応する必要があります。

ソリューションのアイデア：

現在のビューポートの幅と高さを取得し、ビデオのアスペクト比を調整して塗りつぶし、ビデオウィンドウの位置を水平方向の中央に調整します。

<！DOCTYPE html> 
<html lang = "en"> 

<head> 
    <meta charset = "UTF-8"> 
    <meta name = "viewport" content = "width = device-width、initial-scale = 1.0"> 
    < title> video_demo </ title> 
    <script src = "https://cdn.bootcss.com/jquery/3.5.0/jquery.js"> </ script> 
</ head> 
<style> 
    * { 
        margin：0; 
        パディング：0; 
    } 

    .pageIndex { 
        幅：100％; 
        高さ：100％; 
        位置：相対; 
        background-color：＃0f0f12; 
    } 

    .videobox { 
        position：absolute; 
        上：0; 
        左：0; 
        幅：100％;
        高さ：100％; 
    } 

    .pageIndex .fullvid { 
        position：absolute; 
        幅：100％; 
        左：50％; 
        マージン左：-50％; 
        上：0px; 
        オーバーフロー：非表示。
        background-color：＃0f0f12; 
    } 
</ style> 

<body> 
    <div class = "page pageIndex"> 
        <div class = "fullvid"> 
            <div class = "videobox"> 
                <video muted = "muted" loop = "loop" autoplay = "autoplay" height = "100％" width = "100％"> 
                    <source src = "https：//static.web.sdo。
            </ div> 
</ body> 
<script> 
    var n = document.documentElement.clientHeight、
        e = document.documentElement.clientWidth、
        t = n / e; 
    $（ "。page、.fullvid"）。height（n）; 
    // 9/16 = 0.5625视频宽高比
    if（t> .5625）{ 
        $（ "。videobox"）。width（n / .5625）; 
        $（ "。videobox"）。height（n）; 
        $（ "。videobox"）。css（ "marginLeft"、0-（n / .5625-e）/ 2）; 
        $（ "。videobox"）。css（ "marginTop"、0）; 
    } 
    else if（t <.5625）{ 
        $（ "。videobox"）。width（e）; 
        $（ "。videobox"）。height（.5625 * e）;
        $（ "。videobox"）。css（ "
        $（ "。videobox"）。width（e）; 
        $（ "。videobox"）。height（n）; 
        $（ "。videobox"）。css（ "marginLeft"、0）; 
        $（ "。videobox"）。css（ "marginTop"、0）; 
    } 
</ script> 

</ html>

ビデオフルスクリーンビデオの背景はさまざまな解像度に適応します

おすすめ