Vollbild Video im Hintergrund auf allen Geräten (PC/Handy)

[tom_hatchet]

Hallo @Tommy Herrmann,

kannst Du mir bitte sagen, was muss ich im Code anpassen, damit das Hintergrund Video im Vollbildmodus auf dem Handy abgespielt wird? Das mit Abspielen hat funktioniert, jetzt fehlt mir die passende Anpassung des Videos zu der Bildschirmgröße.

Wie hier gezeigt s. Beispiel 1, aber bezogen auf mein Layout.

https://www.mobirise-tutorials.com/Test ... round.html

Ich nutze Mobirise 5.9.18 und Header5:

HTML:

Code: Alles auswählen

<section class="header5" group="Headers" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{

         'mbr-fullscreen': fullScreen,

         'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>

    <!-- Block parameters controls (Blue "Gear" panel) -->

        <input type="checkbox" title="Full Screen" name="fullScreen"

checked>

        <input type="range" inline title="Top" name="paddingTop" min="0"

max="10" step="1" value="10" condition="fullScreen == false">

        <input type="range" inline title="Bottom" name="paddingBottom"

min="0" max="10" step="1" value="4" condition="fullScreen == false">

        <input type="checkbox" title="Show Arrow" name="showArrow" checked>

        <input type="checkbox" title="Show Title" name="showTitle" checked>

        <input type="checkbox" title="Show Subtitle" name="showSubtitle"

checked>

        <input type="checkbox" title="Show Text" name="showText" checked>

        <input type="checkbox" title="Show Buttons" name="showButtons"

checked>

        <fieldset type="background" name="bg" parallax>

            <input type="image" title="Background Image"

value="file:///Users/axelinegroup/Library/Application%20Support/Mobirise.com/Mobirise/info_0040foxhommy_002epl/addons/commercem4/components/_images/background14.jpg"

parallax>

            <input type="color" title="Background Color" value="#ffffff">

            <input type="video" title="Background Video"

value="https://youtu.be/W-6oSR7FfdE" selected>

        </fieldset>

        <input type="checkbox" title="Overlay" name="overlay"

condition="bg.type !== 'color'" checked>

        <input type="color" title="Overlay Color" name="overlayColor"

value="#c1c1c1" condition="overlay && bg.type !== 'color'">  

        <input type="range" inline title="Opacity" name="overlayOpacity"

min="0" max="1" step="0.1" value="0.5" condition="overlay && bg.type !== 'color'">

       

    <!-- End block parameters -->

CSS:

& when not (@fullScreen) {

  padding-top: (@paddingTop * 15px);

  padding-bottom: (@paddingBottom * 15px); } & when (@bg-type = 'image') {

  background-image: url(@bg-value);

}

& when (@bg-type = 'color') {

  background-color: @bg-value;

}

Besten Dank für Deine Rückmeldung.

Viele Grüße

Tom

[Tommy Herrmann]

Hallo Tom,

willkommen bei uns im Forum

Dein YouTube-Video kannst Du doch ganz einfach in sehr viele Header-Blocks von Mobirise einfügen, Beispiel:

https://www.mobirise-tutorials.com/Vorl ... header6-22

(wird nachher wieder bei mir gelöscht)

Das ist dieser Header-Block aus dem Standard-Thema "Mobirise 5":

Dort wählst Du dann in der Toolbox "Video" und trägst die URL zum Video ein:

https://youtu.be/W-6oSR7FfdE

... alles andere macht Mobirise.

[tom_hatchet]

Hallo Tommy,

vielen Dank für Deine schnelle Rückmeldung. Das Forum finde ich toll, weiter so:)

Wie kann ich dann das Video immer auf die komplette Bildgröße strecken? Wenn ich jetzt ein Handy nehme und das Video im Hintergrund abspielen lasse, wird es in der Mitte abgespielt (oben und unten habe ich noch zwei Streifen). Ich will, aber das Video immer in der Mitte des Bildschirms positionieren und dann soweit "einzoomen", damit die zwei Streifen weg sind und immer die momentan verfügbare Fläche mit dem Video vollständig gefüllt ist. Und das dann unabhängig davon, ob es ein PC, Tablet oder Handy ist.

Ich hoffe, dass mein Anlegen verständlich ist. Vielen Dank im Voraus für eine Antwort.

Beste Grüße
Tom

[Tommy Herrmann]

Hallo Tom,

diese Frage wird immer wieder gerne gestellt

Wie soll das gehen bei einem Video, das mittels "cover" so eingestellt ist, dass es zentriert angezeigt wird, dabei aber immer den gesamten Bildschirm, eben als Hintergrund, bedeckt.

Viele Displays haben ganz unterschiedliche Formate und wenn man das Video als Hintergrund so verwendet, dass es eben alles bedeckt, kann das ja nicht funktionieren. Sonst würde das Video doch am Handy im Porträtformat komplett verzerrt werden.

Am Desktop hast Du eher ein breites und am Handy eben das hohe Porträtformat.

Würde man das nicht so machen, müsste das Video proportional verkleinert werden, um vollständig angezeigt zu werden, das resultiert dann in einer großen leeren Fläche über und unter dem Video.

Dazu habe ich hier Beispiele:

https://www.mobirise-tutorials.com/Test ... tml#Video3

[tom_hatchet]

Hi Tommy,

genau, das habe ich gemeint. Also das Video zentriert zu positionieren und die linke und rechte Seite auf dem Handy entsprechend abschneiden, wie Dein Beispiel auch zeigt.

Daher meine Frage lautet, wie kann ich Dein Beispiel auf mein Layout übertragen? Muss ich bei mir nur eine Einstellung im CSS Code ändern? Oder muss ich eher Deine Lösung nehmen und ein neues Layout inkl. der Inhalte erstellen...

Danke und Grüße
Tom

[Tommy Herrmann]

Hier habe ich mal dein Video proportional zum Vergleich in einem ganz normalen Video-Block von Mobirise eingefügt. Dann ist es aber eben kein Hintergrund mehr:

https://www.mobirise-tutorials.com/Vorl ... #video2-23

(wird nachher auch wieder gelöscht)

Hierfür habe ich dann zum Beispiel diesen Video-Block von Mobirise verwendet:

[tom_hatchet]

Ja, perfekt. Die erste Variante hat mich interessiert. Dankeschön:) Wie hast du das gemacht? Mein Code genommen oder nur bei Dir das Video verlinkt?

Grüße
Tom

[Tommy Herrmann]

Welche Variante meinst Du jetzt ganz genau?

Diese hier (das ist mein eigener Code):

https://www.mobirise-tutorials.com/Test ... tml#Video3

oder diese hier:

https://www.mobirise-tutorials.com/Vorl ... #video2-23 (temporärer Test, wird wieder gelöscht)

Bitte mache einen Screenshot oder verlinke genau auf den Block, den Du meinst.

[Tommy Herrmann]

Bei dieser Variante habe ich folgendes selbst gemacht:

https://www.mobirise-tutorials.com/Test ... tml#Video3

Ich habe einen ganz einfachen Textblock aus der Rubrik "Article" vom Standard-Thema "Mobirise 5" verwendet:

Den Beispiel-Text habe ich komplett entfernt - also alles im <p> Tag </p> und durch meinen Code unten, der ein HTML5-Video Tag verwendet, ersetzt. Das Video muss also zuvor auf Deinen Server kopiert werden und nicht von YouTube kommen:

Code: Alles auswählen

                    <!-- 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="myVideo3" 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">Hintergrund Video</h1>
                            <p class="lead mb-0">HTML5 Background Video mit Bootstrap<br><br><a href="Video-Background.html#Video-Textblock" class="text-warning"></a><a href="Video-Background.html#top" class="text-warning">Oben responsives Video&nbsp;<span class="mobi-mbri mobi-mbri-up mbr-iconfont"></span></a><br><br></p>
                          </div>
                        </div>
                      </div>

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

Dann noch diese CSS dazu in den rechten Bereich "CSS Editor" geschrieben:

Code: Alles auswählen

#myVideo3 {
  max-width: 100%;
}
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;
}
.mbr-section-subtitle {
  text-align: center;
  color: #ffffff;
}
.mbr-section-title {
  color: #fafafa;
  text-align: center;
}
@media (max-width: 991px) {
  h1 {
    font-size: 1.5rem;
  }
  p {
    font-size: 1rem;
  }
  header {
    position: relative;
    background-color: black;
    height: 25vh;
    min-height: 15rem;
    width: 100%;
    overflow: hidden;
  }
}

Unten Ansicht vom Video-Block im "Code Editor":

[Tommy Herrmann]

Bei dieser Variante:

https://www.mobirise-tutorials.com/Vorl ... #video2-23 (temporärer Test, wird wieder gelöscht)

habe ich lediglich die URL zu Deinem YouTube-Video in einen vorhandenen Video-Block von Mobirise eingefügt, so wie ich es oben doch bereits, inklusive Screenshot des Blocks, gezeigt hatte.

Das ist dann aber ein reines Video und man kann dort keinen Text auf das Video legen, wie bei meiner selbst erstellten Variante.