Hintergrundvideo Fullscreen in HTML 5 Webseite

Rongkongcoma · 30. November 2014

Hallo abermals.
Ich habe nach wie vor ein Problem mit dem Thema eines Hintergrundvideos als Fullscreen in einer Webseite.
Ich möchte ein Video als Hintergrundbild haben wie es auf folgender Webseite zu sehen ist :

http://arttica.is/

Grundsätzlich gibt es viele tolle Tutorials welche relativ einfach zeigen wie man das macht.
Leider verhält sich dann meine Seite immer anders.
Bei der oben genannten Seite ist es so ... wenn man das Browserfenster kleiner macht ... das video sich anpasst.

Verkleiner ich das Browserfenster in der höhe passiert folgendes ... :
Das Video geht gleichmässig oben und unten aus dem Browserfenster raus ... bleibt aber gleich gross und die Mitte des Videos bleibt mittig in der Mitte des Browserfensters.

Verkleiner ich das Browserfenster in der Breite passiert folgendes ... :
Das Video geht gleichmässig rechts und links aus dem Browserfenster raus ... bleibt aber gleich gross und die Mitte des Videos bleibt mittig in der Mitte des Browserfensters.

Die Mitte des Videos bleibt also beim verkleinern des Browserfenster immer mittig zentriert und das Aspect Ratio bleibt erhalten.
Das Video fährt an den Rändern raus aus dem Browserfenster aber das Aspect Ratio bleibt erhalten und die Mitte des Videos bleibt in der Mitte des Browserfensters.

Die Frage ist ... welchen Code muss ich hierfür in die CSS Datei schreiben???

Bisher konnte mir keiner helfen.

Mein Code für das eingebundene Video in meiner Seite ist folgender :

#video_background {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

Leider verhält es sich dabei so das mein Video dann rechts und oben angeklatscht ist am Browserfenster.
Das Video behält zwar das Aspect Ratio ... fährt aber nur links und unten raus und die Mitte des Videos bleibt nicht in der mitte des Browserfensters beim verkleinern des Browserfensters.
Sprich wenn ich mein FullHD Video in einem verkleinerten Browser sehe ... dann sehe ich meisst nur 1/4 des videos ... und dann davon das links oben gelegene viertel.
Ich will aber das mein Video mittig in der Mitte des Browserfensters angezeigt wird.
Wie gesagt ... also so wie es sich oben bei der geposteten Webseite verhält.

Wie ist das nur zu schaffen???
Kann mir jemand einen Code posten der das ermöglicht?
Würde mich sehr über jegliche Vorschläge freuen.

LG Rongkongcoma

Basi · 30. November 2014

CSS

background-size: cover;

Wenn du deinem Video right: 0; und top: 0; gibst ist es klar das es aus den Ecken skaliert, einfach zentrieren?

wolf · 30. November 2014

Wie basiii schon sagte bg-size 'cover' wäre das was du brauchst allerdings funktioniert das auch nur für Hintergrundbilder und das was du hast ist ein Element..

Das hier klingt nach einer recht simplen Lösung, evtl nicht 100% perfekt aber immerhin das richtige..
http://stackoverflow.com/quest…ontain-for-image-elements
..wenn es dir nicht reicht dann bekommst du hier genau was du suchst...
http://fvsch.com/code/video-background/

Rongkongcoma · 30. November 2014

Danke für die Hilfe "Wolf".

Leider werde ich immer frusstrierter da ... je weiter ich komme ... umso mehr Probleme habe.

Die Seite die Du mir angegeben hast mit dem folgenden Link:
http://fvsch.com/code/video-background/
ist in der Tat hilfreich beim lösen des Problems.

So habe ich es geschafft mit dem Code der einem dort vorgegeben wird ... bezogen auf mein Video ... das Problem zu lösen.
Nun tut sich aber ein anderes Problem auf.

Folgendes :

Vorher hatte ich es mit meiner Seite wie ich es einerseits haben wollte.
Es spielte sofort ab und lief als Dauerschleife.

Jetzt mit der Variante von der Webseite habe ich die Proportionen und das Verhalten mit dem zentriert sein das ich mir erwünscht hatte.
Jedoch habe ich nun das Problem das es einen Button gibt den man drücken muss damit es los geht.
Darüber hinaus spielt es nur einmal ab.

Wenn Du "Wolf" ... oder wer auch immer ... mir beim ausmerzen des Problems noch einmal helfen würdest ... wäre das super.

Der Code meiner Seite sieht jetzt folgendermassen aus.

Die HTML-Seite:

<!DOCTYPE html>
<html>

<head>
<title>BC Biz _ Hintergrundvideo</title>

<body>

</body>

</html>

Die CSS-Datei:

html, body

#video-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}

#video-bg > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* 1. No object-fit support: */

@media (min-aspect-ratio: 16/9) {
#video-bg > video { height: 300%; top: -100%; }
}

@media (max-aspect-ratio: 16/9) {
#video-bg > video { width: 300%; left: -100%; }
}

/* 2. If supporting object-fit, overriding (1): */

@supports (object-fit: cover) {
#video-bg > video {
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
}

Hoffe es kann mir Jemand ... den Code so verändern das der Button Weg ist und das Video als Dauerschleife abspielt.
Dann kann ich endlich das Kapitel "wie bekomme ich ein Hintergrundvideo auf eine Webseite" abschliessen und mich dran machen endlich die Seite aufzubauen.
Abermals wird jede Hilfe Dankend angenommen.

LG Rongkongcoma

wolf · 30. November 2014

Bitte lies einmal wie man Code richtig Formatiert Postet: Den eigenen Code lesbar im Forum präsentieren

Für dein Problem gibt es eine Lösung
(übrigens ist mein Name wirklich Wolf.. )
Also .. Für die Tags <audio> und <video> gibt es sogenannte attribute <- einfach mal lesen.
für Video gibt es auch Attribute.. und hier wird es Interessant
Man kann dem Videoplayer Kontrollbuttons mitgeben oder auch nicht (attr. 'controls')
Ebenfalls kann man das Video automatisch abspielen lassen (attr. 'autoplay')
Auch kann man es auf lautlos stellen (attr. 'mouted')
Und zu guter letzt das Video in Dauerschleife abspielen lassen (attr. 'loop')
Hier eine Liste und Infos: http://www.html-seminar.de/html-5-video.htm

Abhilfe findest du auch meistens mit folgender Google suche:

{sprache} {problem}
also z.B.
HTML5 Video dauerschleife

Grüße

HTML

<video mouted autoplay loop>
    <source type="video/mp4" src="video.mp4" media="(orientation:landscape)">
    <source type="video/mp4" src="video.mp4" media="(orientation:portrait)">
</video>

Rongkongcoma · 30. November 2014

Hurrah ... ich habs alleine geschafft.
Habe einfach meinen alten Code bezüglich des Videos in der HTML-Datei integriert und die CSS-Datei so genommen wie der es auf der Webseite angibt.
Schwupps ... liefs ohne Buttons und ähnliches.
Supi.
Trotzdem Danke für die Hilfe.

Hier noch einmal mein jetzt funktionierender Code ... bestehend aus HTML und CSS Datei ... um ein Video im Browser-Hintegrund laufen zu lassen.
Ohne Buttons und mit Autorun und Dauerschleife und Aspect Ratio und Zentrierung in der Browsermitte egal wie man diesen verkleinert .... in Farbe ... und Bunt.

Die HTML-Datei:

HTML

<head>
	<title>Rongkongcoma Hintergrundvideo Fullscreen</title>




	<meta charset="ISO-8859-1">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="keywords" content="">
	<meta name="generator" content="">




	<link href="design.css" type="text/css" rel="stylesheet">
</head>




<body>




<div id="video-bg">




<video id="video-bg" volume="0" muted="muted" loop="loop" autoplay="true" preload="auto">
<source type="video/mp4" src="video.mp4"></source>




</div>




</body>

Alles anzeigen

Und die dazugehörige CSS-Datei:

CSS

#video-bg {
	position: fixed;
	top: 0; 
	right: 0; 
	bottom: 0; 
	left: 0;
	overflow: hidden;
  }




  #video-bg > video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }




  /* 1. No object-fit support: */

  @media (min-aspect-ratio: 16/9) {
	#video-bg > video { height: 300%; top: -100%; }
  }




  @media (max-aspect-ratio: 16/9) {
	#video-bg > video { width: 300%; left: -100%; }
  }




  /* 2. If supporting object-fit, overriding (1): */

  @supports (object-fit: cover) {
	#video-bg > video {
  	top: 0; 
  	left: 0;
  	width: 100%; 
  	height: 100%;
  	object-fit: cover;
	}
  }

Alles anzeigen

Gruss Rongkongcoma

The Scout · 1. Dezember 2014

Kleiner Tipp, damit dein HTML nicht doppelt gemoppelt wird:
HTML 5 unterstützt "kurzes" HTML, im Gegensatz zum XHTML. Was heißt das?
Du kannst folgendes machen (dein Videocode):

HTML: 17

<!-- VON -->
<video id="video-bg" volume="0" muted="muted" loop="loop" autoplay="true" preload="auto">




<!-- ZU -->
<video id="video-bg" muted loop autoplay="true" preload="auto">

Denn das Attribut "muted" sagt ja schon, dass das Video still sein soll, volume solltest du daher nicht brauchen.

Und ganz allgemein:
- Alles, wo man das Attribut als Attributwert wiederholen würde kann man das Attribut alleine schreiben (loop anstatt loop="loop").
- Alle "selbstschließenden" Tags brauchen kein Slash am Ende (<br> anstatt <br />)
- Theoretisch könnte man bei Attributen sogar die Anführungszeichen weglassen, wenn der Wert nur ein Wort ist (preload=auto anstatt preload="auto") würde ich aber nicht empfehlen

wolf · 1. Dezember 2014

Wenn autoplay true ist.. ist preload überflüssig (wenn wir hier schon am Code optimieren sind )

Hintergrundvideo Fullscreen in HTML 5 Webseite

Jetzt mitmachen!

Teilen