Willkommen auf dem Portal für Mediengestalter

Cryptogirl · Threadersteller

Hi,
ich möchte ein Fullscreen-Video (mp4) statt einer normalen Website anzeigen lassen.
Klappt soweit auch.
Problem 1: wie kann ich ein Bild statt des Videos anzeigen lassen, bis das Video geladen ist?
Problem 2: unten ist ein schwarzer Balken, kann man das irgendwie fixen?
Problem 3: im Smartphone wird nur der rechte untere Teil angezeigt.
Wäre super, wenn jemand eine Lösung wüsste.

HTML:
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
</head>

<section class="header">
<video autoplay loop class="video-background" muted plays-inline">
<source src="background-video.mp4" type="video/mp4">
</video>

<body>
</body>
</html>

CSS:
*
{
margin: 0;
padding: 0;
}
.header
{
height: 100vh;
}
.video-background
{
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
@media (min-aspect-ratio:16/9)
{
.video-background
{
width: 100%;
height: auto;
}
}

LG
Crypto

Icehawk · **Verfasst** Mo 11.04.2022 13:21 **Titel**

Problem 1: schau mal beim video-Tag nach dem Attribut "poster".

Willkommen auf dem Portal für Mediengestalter

Thema: Fullscreen-Video vom 09.04.2022

Fullscreen-Video