Responsive fullscreen video with sound (GERMAN)

Design help General
1

Hi there!

Does anyone has an idea how I can realize a responsive fullscreen video with sound like this one:

It should behave like a background video, so it is fullscreen covering, not containing the video.

Many thanks for your tipps!

2

Hi there! No one any idea?

3

Hi @MHGRAFIKDESIGN,
das sollte doch relativ einfach sein…
Ich würde es über custom code probieren…

Dann gib dem container etwas margin, und das sollte es sein…
Für den mute button würde ich jquery nehmen…

Das ganze sollte eigentlich nicht besonders schwer sein. Du musst halt nur dein video irgendwo hosten. Ich weiß gerade nicht ob webflow normalen video upload zulässt.

Lg
Maxi

5

Hi @MHGRAFIKDESIGN,
nochmal ich…
Ich habe den code so angepasst dass das video gleich direkt spielt, und auch keine controls anzeigt.

<body>
  <button id="mute-video">Toggle Mute</button>
  
  <video src="http://s3.amazonaws.com/servingsites-videos/firstbaptistchurchofnorfolk/sample-welcome-video-2.mp4" autoplay width="240"></video>
  
  <script>
  $("video").prop('muted', true);

  $("#mute-video").click( function (){
    if( $("video").prop('muted') ) {
          $("video").prop('muted', false);
    } else {
      $("video").prop('muted', true);
    }
  });
  </script>
</body>
</html>

Der Code oben braucht jquery dass er funktioniert.

Das ganze in nem fiddle:

Wenn der Ton an sein soll, einfach das boolean Attribut aus dem video tag entfernen. Nicht auf “=true” oder “=false” stellen, da es ein boolean ist und der nicht mit true oder false getriggert wird, sondern nur mit existenz und nichtexistenz.

Wenn das ganze funktioniert, gerne als Lösung markieren :smiley:

Maxi

6

Hi @MXI ,

Besten dank für deine Antwort! Habe überhaupt gar nicht mehr damit gerechnet, dass jemand antwortet.

Kann man eigentlich irgendwo einstellen, dass man eine E-Mail-Benachrichtigung bekommt, wenn ein Eintrag mit Bookmark beantwortet wird? Ich bekomme das nie mit…

Zum Thema: Also gemutet soll und muss das Video gar nicht werden. Es soll quasi ein Hintergrund-Video MIT Sound sein, oder halt ein Video, das den ganzen Bildschirm einnimmt. Das YouTube- oder Video-Element passt das Video quasi auf “fit” ein, und nicht auf “cover”. Versteht du was ich meine?

Nochmals besten Dank für deine Rückmeldung! Hoffe du meldest dich nochmal. :slight_smile:

7

Hi @MHGRAFIKDESIGN,

Ich bin mir leider nicht ganz sicher, was du meinst, da du fit und cover glaube ich bissle verwechselst. Also man kann es so einstellen, dass das Video entweder komplett den vorhandenen Platz deckt, “cover” oder dass das Video also immer 100% width oder 100% height einnimmt. Das ist dann “fill” Auf jeden fall habe ich mal ein Youtube Video als Background “gemacht”.
https://preview.webflow.com/preview/webflowtutorial12?utm_medium=preview_link&utm_source=designer&utm_content=webflowtutorial12&preview=512117e6f23396859e6da6caa6a4f5ee&pageId=60058ab83a4157420ae727db&mode=preview

Live Site:
https://webflowtutorial12.webflow.io/video-test

Hier ist das Projekt zum clonen:

Das ganze habe ich aus diesem Fiddle. (Codepen)

Eine Jquery alternative gibt es hier:

https://stamat.github.io/jquery.youtube-background/

Da bin ich mir nicht sicher. Ich zumindest, habe diese Einstellung noch nicht gefunden. Aber ich habe mir das Forum auf dem Handy als Shortcut hinzugefügt, und bekomme so Benachrichtigungen.

Lg
Maxi

8

Super! Vielen vielen Dank! Ich vergesse immer im Forum nachzuschauen, wenn es nicht top dringend akut ist. :man_facepalming: Werde das direkt mal ausprobieren.