Fullscreen YouTube Video

Guckt Euch auch dieses Script für ein eigenes Hintergrund-Video an.

Dieses Hintergrund-Video kann auch am mobilen Gerät (Handy) bedient werden. Man kann es nur im obersten Block an einem Start-Button einschalten und an einem "Control-Panel" im unteren Bereich vom Block anhalten oder weitere Optionen verwenden. Bewegt die Maus am PC oder tippt mit dem Finger am Handy auf einen freien Bereich, damit das Control-Panel erscheint.

Tutorial:

Bitte guckt Euch hierzu auch mein altes Tutorial für "NOF" an. Ich habe hier die CSS und den iFrame vom YouTube Video in den obersten, Fullscreen-Block kopiert.

Hier meine CSS, die in den Bereich "CSS Editor" vom Code Editor gehört:

iframe#bgvid {

position: fixed;

top: 50%;

left: 50%;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: 0;

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

Hier mein iFrame-Code, der unter die Block-Class "<div class="row">" eines beliebigen Blocks gehört. Diesen Code müsst Ihr natürlich an Euer Video anpassen. Ich habe z.B. noch eine Playlist erstellt, damit das Video mit "loop=1" auch wiederholt wird und eben zur Steuerung die Option "controls=1" hinzugefügt.

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