Beispiel Hintergrund Video

Gefunden auf jsfiddle.net

Mobirise bietet nur die Möglichkeit Video-Blöcke zu verwenden, auf denen man Videos von Video-Plattformen wie "Vimeo" oder "YouTube" verwenden kann. Oft besteht aber auch der Wunsch eigene Videos zu verwenden.

Ich habe hier einen einfachen Textblock aus der Rubrik "Artikel" verwendet und den oberen Teil mit den Mobirise-Parametern sowie das äußere <section> Tag </section> erhalten und den Rest mit diesem HTML-Code im "Code Editor" ersetzt - siehe Screenshot unten.

Zum automatischen Start am mobilen Gerät ist es notwendig mit dem Attribut "muted" das Video stumm zu schalten. Bei iOS und WebKit muss dazu auch noch das Attribut "playsinline" hinzugefügt worden sein.

Für diejenigen, die auch so einen Button "Pause / Play" einbauen möchten, markiere ich die dafür notwendigen Elemente in rot. Natürlich könnte man diesen Button auch weglassen, wie an meinem Video-Beispiel unten, oder irgendwo anders auf der Seite einbauen.

<!-- Start HTML für Hintergrund-Video -->
<header>

  <!-- Dieses <div> erzeugt das transparente Overlay, das man in der CSS modifizieren kann -->
  <div class="overlay"></div>

  <!-- Das HTML5 Video Element für das Hintergrund-Video im Header, das mit "muted" stumm geschaltet wird -->
  <video 
id="myVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="https://www.mobirise-tutorials.com/Testseiten/Testseite-Blank/video/Background.mp4" type="video/mp4">
  </video>

  <!-- Dies ist der Inhalt im Header, der dann auch mit Mobirise modifiziert werden kann -->
  <div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
      <div class="w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <p class="lead mb-0">HTML5 Video mit Bootstrap</p>

        <div class="mbr-section-btn align-center" mbr-buttons mbr-theme-style="display-4">
          <button id="myBtn" onclick="myFunction()" class="btn btn-primary">Pause</button>
        </div>

      </div>
    </div>
  </div>

</header>
<!-- Ende HTML für Hintergrund-Video -->


Diese CSS gehört in den "Code Editor" in den Bereich "CSS Editor". Mit dem Selektor header könnt ihr die Höhe des Blocks einstellen, hier z.B. height: 100vh (100% Viewport Höhe). Die Höhenangabe "vh" richtet sich am Viewport, dem verfügbaren Bereich, eines Gerätes aus:

header {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}
header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  transform: translateX(-50%) translateY(-50%);
}
header .container {
  position: relative;
  z-index: 2;
}
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.1;
  z-index: 1;
}

#myBtn {
  margin-top: 50px;
  opacity: 0.5;
  width: 150px;
  border-radius: 10px;
}



Für den Einbau des Buttons "Pause / Play" habe ich noch zusätzlich dieses JavaScript in den "Seiteneinstellungen"
im Bereich "End of <body> code" eingefügt:

<!-- Video Button Script -->
<script>
  var video = document.getElementById("myVideo");
  var btn = document.getElementById("myBtn");
  
  function myFunction() {
    if (video.paused) {
      video.play();
      btn.innerHTML = "
Pause";
    } else {
      video.pause();
      btn.innerHTML = "Play";
    }
  }
</script>

Video-Code

Hintergrund Video

HTML5 Background Video mit Bootstrap

Oben weiteres Video im Header 

Background Video mit Text

Hier habe ich genau den gleichen Code wie oben verwendet, nur mit einem anderen Video in einer Höhe von:

height: 75vh;

Siehe Screenshot vom "Code Editor" unten.

Tipp:

Ihr findet auch jede Menge solcher kostenloser Videos bei:

https://pixabay.com/de/videos/

Video-Code-Textblock

Video proportional

Dieses Video verkleinert sich am mobilen Display indem ich die Breite über CSS auf maximal 100% gestellt habe

#myVideo {max-width: 100%;}

Hintergrund Video

HTML5 Background Video mit Bootstrap

Oben responsives Video 

YouTube Background

Dieses Video besitzt im Prinzip die CSS von meinem Beispiel hier, nur das die Position auf "absolute" steht und der Container eine Bootstrap class="vh-100" erhalten hat.

Das Video muss am Smartphone gestartet werden und kann daher auch keine
Beschriftung mehr zeigen, da diese sonst den YouTube Startbutton verdeckt.

YouTube Background Video

Dieses Video startet am Desktop selbst,
hat keinen Player und ist stumm geschaltet

Reveal Effect has been fixed for standard theme Mobirise 5
© Copyright Mobirise-Tutorials