Rolf B: Video-Ausgabe @media

Beitrag lesen

Hallo Ines,

oookay - ich hab grad mal selbst probiert; einem video-Element Breite und Höhe 100% zu geben wird vom Brauser nicht unbedingt akzeptiert.

Grund: Es ist ein inline-Element. Da ist man mit Breiten und Höhen nicht so frei.

Was bei mir - im Handysimulator von Chrome - zu mehr Freiheit und bildschirmfüllendem Video führte:

video {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

Breite und Höhe also in Prozent der Viewportgröße (vw/vh), nicht Prozent. Prozent hat bei mir nicht geklappt, obwohl ich html und body auf 100% Höhe gesetzt hatte.

Wichtig ist auch die Angabe des viewport Meta im <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

sonst simuliert der Handybrowser einen 960px breiten Viewport.

Rolf

--
sumpsi - posui - obstruxi