フルスクリーンビデオ、バックグラウンドの音楽、中央の画像を含むランディングページを作成する

Question

したがって、全画面ビデオ、中央に画像オーバーレイ、音楽を含むウェブサイトを作成しようとしていますバックグラウンドで私はこれをうまくやり遂げることができましたが、モバイルで見るとゴミ箱になります。

html, body { 
 
    overflow: hidden; 
 
} 
 

 
.fullscreen-bg { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 100; 
 
} 
 

 
.fullscreen-bg__video { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#video_overlays { 
 
    position: absolute; 
 
    text-align: center; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 650px; 
 
    height: 650px; 
 
    z-index: 100; 
 
}

<audio autoplay="autoplay" loop="loop"> 
 
    <source src="h.mp3" type="audio/mpeg" /> 
 
    <source src="h.ogg" type="audio/ogg" /> 
 
</audio> 
 
<div class="fullscreen-bg"> 
 
    <video loop autoplay muted poster="3.png" class="fullscreen-bg__video"> 
 
    <source src="1.mp4" type="video/mp4"> 
 
    </video> 
 
    <div id="video_overlays"> 
 
    <img src="2.png" alt=""> 
 
    </div> 
 
</div>

解決する方法上の任意のアイデア？

Answer 1

モバイルで正しく表示され、機能するウェブサイトは、レスポンシブデザインをCSSに実装する必要があります。これは最高のサイトではありませんが、ここでいくつかの情報を参照してください：https://www.w3schools.com/html/html_responsive.aspこれは、ビデオと画像をモバイルで正しく表示するために必要なすべてを提供します。