Hintergrund Video

HTML5 Background Video mit Bootstrap

Unten weiteres Video in einem Bild-Text Block 

Guckt Euch dieses Fullscreen Video an 

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.

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 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

Reveal Effect does not work since v5.4.1 in standard theme Mobirise 5
© Copyright Mobirise-Tutorrials