Więc staram się stworzyć stronę internetową, która się składatylko pełnoekranowe wideo z nakładką obrazu w środku i muzyką w tle. Udało mi się to zrobić, ale podczas oglądania na urządzeniach mobilnych trafia do kosza.
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="/images/2.png" alt="">
</div>
</div>Jakieś pomysły, jak naprawić?
Odpowiedzi:
0 dla odpowiedzi № 1Aby jakakolwiek strona internetowa wyglądała i działała poprawnie w telefonie komórkowym, musisz zapewnić wdrożenie responsywnego projektu w swoim CSS. To nie jest najlepsza strona, ale proszę zobaczyć niektóre informacje tutaj: https://www.w3schools.com/html/html_responsive.asp W ten sposób otrzymasz wszystko, czego potrzebujesz, aby poprawnie wyświetlać wideo i obraz na telefonie komórkowym.