Tutorial Responsive Background Video und YouTube Video

CSS für Video Background Effekt nach: demosthenes.info. Erfolgreich in allen Browsern getestet. Der Safari benötigt den QuickTime Player am PC.

Hier habe ich meine responsive Website ohne jeglichen, zusätzlichen Layoutbereich aufgebaut.

Dazu habe ich meine Seite auf “ZeroMargins” (also ohne Master-Rahmen-Ränder) eingestellt, sodass ich nur im Layout der Seite arbeite.

Da NOF nun das Layout immer automatisch auf die aufgezogene Breite in Pixeln angibt (bei mir 990px) habe ich dem Layout (<body>) der Seite eine zusätzliche Style-Anweisung (unten) gegeben, mit der ich dem Layout eine absolute Position gebe und ich habe meine Layoutbreite hier dann auf 95% gestellt (bezogen auf die Bildschirmgröße).

> Layout markieren > Fenster “Layout-Eigenschaften > tragt das DIV unten am “Beginn des Haupttextes” (<body>) ein

<div style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 95%;">

... schließt das DIV wieder am “Ende des Haupttextes” (</body>) mit

</div>

Seiten-HTML

Stellt den Hintergrund vom Layout auf transparent oder eine Farbe im Fenster “Layout-Eigenschaften” ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “Hintergrund”

Layout-Eigenschaften

Bitte fügt den unten stehenden Code in die HTML der Seite ein, also das Meta-Tag für mobile Geräte und die CSS für die Anzeige vom Video.

Für die Darstellung vom Video, mit der id=”bgvid”, habe ich die Style-Anweisung hier auch direkt in die HTML vom Layout kopiert.

> Layout markieren > Fenster “Layout-Eigenschaften” > den Code unten “Zwischen Head Tags” einfügen

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

<style>
  video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
  }
</style>

Euer Video selbst (hier “Big-Buck-Bunny.mp4” und “Big-Buck-Bunny.ogg”), kopiert Ihr in das gleiche Verzeichnis in dem die Seite liegt, auf der Ihr dieses Hintergrund-Video einbaut.

Unten das HTML5 Video-Tag, welches das Video aufruft.

Zieht Euch an beliebiger Stelle des Layouts ein Textfeld auf und fügt den Code (unten) in den HTML-Code Editor des Textfeldes ein.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Video-Tag unten einfügen

<video autoplay loop preload="auto" id="bgvid">
    <source src="Big-Buck-Bunny.mp4" type="video/mp4" />
    <source src="Big-Buck-Bunny.ogg" type="video/ogg" />
    <span style="font-size: 24px; color: red;">Dein Browser unterstützt kein HTML5 Video</span>
</video>

Die modernen Browser können inzwischen alle das MP4 Format abspielen, daher ist das OGG Format (oben rot markiert) optional. Das Video müsste dann auch zunächst zusätzlich in diesem Format konvertiert und dann natürlich auch auf den Server kopiert werden.

Bemerkungen:

  • autoplay = das Video startet automatisch
  • loop = das Video wird wiederholt
  • preload = hier automatisches Vorladen vom Video
  • bgvid = ist die ID, die in der CSS definiert wurde

Guckt Euch zum besseren Verständnis die Optionen für ein HTML5 Video Tag an.

Nun wollte ich noch die Möglichkeit schaffen das Video zu steuern, also auch z.B. auszuschalten. Hierfür habe ich folgende JavaScript-Funtionen ebenfalls in die HTML des Layouts “Zwischen Head Tags” eingefügt. Hier greife ich wieder auf die ID vom Video zurück.

<script type="text/javascript">
    function vidplay() {
       var video = document.getElementById("bgvid");
       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

    function restart() {
        var video = document.getElementById("bgvid");
        video.currentTime = 0;
    }

    function skip(value) {
        var video = document.getElementById("bgvid");
        video.currentTime += value;
    }     
</script>

Um diesen Player aufzurufen zieht Ihr Euch ein Textfeld auf und fügt den unten stehen Code wieder in den HTML-Code Editor vom Textfeld ein. Zur Darstellung der Zeichen in den Buttons verwende ich unter anderem Unicode Steuerzeichen.

<div id="buttonbar">
    <button id="restart" title="von vorne" onclick="restart();">&#x1f3a5;</button>
    <button id="rew" title="10 Sek. zurück" onclick="skip(-10)">&lt;&lt;</button>
    <button id="play" title="Pause/Play" onclick="vidplay()">||</button>
    <button id="fastFwd" title="10 Sek. vorwärts" onclick="skip(10)">&gt;&gt;</button>
</div>

Um die gesamte Seite responsive zu halten, müssen sämtliche Objekte, also sämtliche Textfelder immer die zusätzliche Style-Anweisung in Prozent erhalten. Gebt also jedem Textfeld eine Breite von 100% in den CSS-Eigenschaften und zieht jedes Textfeld auf die volle Layoutbreite auf.

CSS-Textfeld

 

Für das YouTube Video habe ich fast die gleiche CSS verwendet, nur hier habe ich das Tag iframe angesprochen.

<style>
  iframe#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }
</style>

Den eingebetteten <iframe> code von YouTube habe ich mit meiner Video ID wieder in den HTML-Code Editor eines Textfeldes kopiert.

<iframe frameborder="0" id="bgvid" src="https://youtube.com/embed/aN1cJmop0AM?autoplay=1&loop=1&playlist=aN1cJmop0AM&controls=0&showinfo=1&autohide=1"></iframe>

Guckt Euch die Optionen für eingebettete YouTube Videos an. Für den Befehl “loop” (wiederholen) benötigt Ihr eine “playlist” (hier das gleiche Video). Um den YouTube Player anzuzeigen, setzt Ihr controls=1.

Achtet darauf, dass die Maus die YouTube Optionen nicht über NOF-Objekten anzeigen kann und Ihr daher den negativen z-index: -100; in der CSS eventuell weglassen müsst, je nachdem wie die Seite aufgebaut wird - so wie ich das hier auf meiner YouTube Seite “Player Controls” getan habe. Dort habe ich anstelle dessen Layoutbereiche von NOF verwendet und denen dann einen entsprechend hohen z-index in einem DIV “vorher” (vor dem Tag) gegeben:

<div style="position: absolute; z-index: 2000; top: 35px; left: 0; right: 0; margin: auto; width: 83%;">

Vergesst nicht das DIV dann “nachher” (nach dem Tag) wieder zu schließen:

</div>

Für zusätzliche Möglichkeiten der Erstellung von responsive Webdesign guckt bitte auch hier:

Tutorial responsive Website mit Layoutbereichen

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik