Responsive einbindung eines Videos mit HTML5?
Hallo, ich würde gerne ein Hintergrundvideo mit HTML5 einbinden. Das funktioniert auch alles ganz gut, wobei ich es nicht schaffe, dass bei kleinen bildschirmen einfach nur der ausschnitt angezeigt wird. Wenn ich die Seite auf einem kleinen Bildschirm öffne, ist das Video entweder nicht hoch genug und wird in der vollen breite dargestellt, oder es wird nur der ausschnitt angezeigt, man kann aber nach rechs weitercrollen am smartphone, also der rest vom video ist auch da und zerstört den responsiven aufbau. was mache ich falsch?
2 Antworten
verwende eine iframe Einbindung und umschließe das iframe mit einem div container.
<div class="resp"><iframe src=videourl ... ><iframe></div>
definiere das iframe zwecks Größenanpassung per css:
.resp iframe {
top:0;
left:0;
width: 100%;
height: 100%;
}
passe den Abstand im div conatiner an um das korrekte Seitenverhältnis des Videos zu erhalten:
.resp {
position: relative;
padding-bottom: 56,25%; /*klassisch für 1600*900 Video mit 16:9 Format */
padding-top: 0px;
height:0;
overflow: hidden;
}
viel Spass :-)
das Besondere am iframe ist, dass es wie eine eigene Browserverbindung gehandhabt wird. Insbesondere wenn Du ein CMS System und ein externes Youtubevideo benutzt, finde ich das in der Regel die beste Wahl. Wenn Du das Video selbst auch hostest, gehen auch andere Varianten. den <video> Tag habe ich noch nicht ausprobiert.
Benutze niemals iframes, wenn es nicht zwingend nötig ist.
Lege dein Video in einen Container und setze die Höhe des Videos auf 100% und die Breite auf "auto". Der Parentcontainer bekommt ebenfalls height: 100% und overflow: hidden.
Dann mit einem Media Query z.B. ab Desktopgröße das Videotag ändern:
@media screen and (min-width: 964px) {
video {
width: 100%;
height: auto;
}
Sollte height: 100% nicht geben, gebe dem html und body vorher die Höhe, um sie für das Dokument zu definieren.
html, body {
height: 100%;
}
ps. Warum du kein iframe benutzen solltest: http://stackoverflow.com/a/362743
danke für die schnelle antwort, funktioniert das so auch mit dem <video> tag in html5? einen iframe kann ich leider nicht verwenden.