Code für Hintergrund-Video korrekt?

mhgrafik · 25. April 2014

Hallo!

Über die Suche bin ich leider nicht fündig geworden. Es gab zwar ein paar Einträge zu Hintergrund-Videos, aber dies konnte mir meine Frage nicht beantworten. Deshalb folgendes:

Ich bin Designer und arbeite mit Adobe Muse, einem Tool zur Website-Erstellung auf Designer zugeschneidert. Ich weiß, jeder Coder packt sich nun an den Kopf, aber aus meiner Sicht macht das Tool seine Arbeit gut. Allerdings sind hier natürlich Grenzen gesteckt.

Ich möchte ein Hintergrund-Video auf meiner Seite einfügen, welches immer das Browser-Fenster füllt. Der Content darüber soll ganz normal scrollen. So wie bei dieser Website: arttica.is .

Diese Option bietet das Tool nicht. Man hat jedoch die Möglichkeit, HTML-Code manuell einzufügen. Ich habe folgenden Code im Body eingetragen:

HTML

<div id="container">
  <video width="100%" preload="auto" autoplay="true" loop="loop">
    <source src="assets/video.webm" type="video/webm" />
    <source src="assets/video.mp4" type="video/mp4" />
  </video>
</div>

CSS

body{
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}




#container{
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

Alles anzeigen

Das Ergebnis könnt ihr unter www.mhgrafikdesign.de/new/printdesign einsehen. Wie ihr sehen könnt, klappt das nicht so ganz. Anscheinend wird der Code ab "body{" ignoriert, da er als normaler Text auftaucht.

Ist etwas an dem Code falsch? Muss ich etwas im Head einfügen? Ich habe davon leider nicht so viel Peil, würde das aber liebend gerne umsetzen.

Hoffentlich gibt es eine Lösung! Wäre dafür echt dankbar!

Viele Grüße

Marc

wolf · 25. April 2014

Hallo, herzlich willkommen hier im Forum!
einmal hier lesen, bitte Den eigenen Code lesbar im Forum präsentieren

Naja, du musst dein css in eins deiner Stylesheets einfügen.. (printdesign.css)
Dann sollte alles klappen
Du kannst dir unter Firefox ein Addon namens Firebug holen, dann aufs Video Rechtsklick -> Element mit Firebug untersuchen und dann siehst du rechts, was an css für die Elemente ankommt..

Oder du schreibst das hier in deine Page..

HTML

<div id="container">
    <video preload="auto" autoplay="true" loop="loop">
        <source src="assets/video.webm" type="video/webm" />
        <source src="assets/video.mp4" type="video/mp4" />
        <!-- evtl hier noch ein Text schreiben, wenn der Browser das Format nicht unterstützt, z.B.: -->
        Video Format wird leider nicht unterstützt. :(
    </video>
</div>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    video{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: -1;
    }
</style>

Alles anzeigen

Außerdem lieber die Formate mp4 & ogg verwenden.. wenn ich mich richtig erinner

mhgrafik · 25. April 2014

Hey Wolf!

Die Code-Darstellung habe ich irgendwie überlesen. Sorry. Werde ich beim nächsten Mal beachten.

Danke für die schnelle Antwort, super!

Also, wenn ich das recht interpretiere, habe ich den CSS-Code nicht als CSS ausgewiesen? Das mach ich entweder, in dem ich den Code in die separate CSS-Datei einfüge, oder indem ich den Code mit einem Style-Tag versehe, richtig?

Ich versuche auch immer die Hintergründe dazu zu verstehen. Dann kann ich mir demnächst meine Fragen vielleicht auch mal selbst beantworten...

Nochmals Danke!!! Werde ich gleich heute Abend ausprobieren!

wolf · 25. April 2014

Top, genau richtig verstanden
Der Code wird als Text interpretiert und somit nicht beachtet..
Als Style ausweisen.
Beides darfst du unter html5 überall auf der Page (<head>) ist empfehlenswert

HTML

<link rel="stylesheet" type="text/css" href="datei.css">
<style>
    /* coooode */
</style>

The Scout · 25. April 2014

Hallo im Forum.
Ja, für Style gibt es verschiedene Möglichkeiten, zum Rumprobieren bietet sich das direkte Schreiben in die HTML Datei am Besten an.
Hier mal eine Idee, wie man das umsetzen könnte, keine Garantie auf Erfolg:

HTML

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Seitentitel</title>




    <style>
      * { /* Universalzeiger, um die browserspezifischen Abstände zu elimieren */
          margin: 0;
          padding: 0;
      }
      video#background {
          position: fixed; /* Wird nicht von Scrollen beeinflusst */
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      }
      div#content {
          position: absolute; /* Wird nicht und beeinflusst keine anderen Elemente */
          z-index: 2; /* 1 ist Standard, kann man sich als Ebenenmodell vorstellen */
          width: 80%;
          margin: 0 auto; /* Mittig ausrichten */
      }
    </style>
  </head>




  <body>
    <video id="background" preload="auto" autoplay="autoplay" loop="loop">
      <source src="pfad/zum/video.webm" type="video/webm" /> <!-- WebM da kleine Datei, für Chrome, FF, Opera -->
      <source src="pfad/zum/video.mp4" type="video/mp4" /> <!-- Für Safari und Internet Exploder -->




      <p>Das hier wird angezeigt, falls der Video-Tag nicht unterstützt wird.</p>
    </video>




    <div id="content">
      <!-- Dein Seiteninhalt -->
    </div>
  </body>
</html>

Alles anzeigen

Code für Hintergrund-Video korrekt?

Jetzt mitmachen!

Teilen