Video auf die komplette Breite bringen

[mikesch23]

Sehr geehrte Damen und Herren,

ich habe einen Code gefunden, der das Video automatisch abspielen lässt. Allerdings kriege ich es nicht hin, den Code so zu verändern, dass das Video auf die komplette Breite gebracht wird und nicht links und rechts diese Farbe besitzt.  Das ist in allen Ansichten so. Shop URL: https://0nwn5iby9hf2km4v-79844802885.shopifypreview.com

Der Liquid-Code:

<style>
video {
display: block;
margin: auto;
max-width: 2000px;
}

@media screen and (max-width: 2000px) {
video {
width: 90%;
}
}
</style>

<video controls autoplay loop playsinline muted>
<source src="
https://cdn.shopify.com/videos/c/o/v/6a70174ffb90450f870bd427b839713c.mp4" />
</video>

Habt ihr eine Idee, wie man dieses Video auf die komplette Länge hinbekommt? 

Ich freue mich sehr auf eine Antwort und verbleibe mit freundlichen Grüßen.

Mikesch 

[Gabe · Accepted solution]

Hey @mikesch23 

Toller Video aber dein Preview Link oben funzt nicht:

Um das Video auf die volle Breite der Ansicht auszudehnen, ohne dass links und rechts Farben sichtbar sind, kannst du den CSS-Code so anpassen, dass das Video sich automatisch an die Breite des Containers anpasst, in dem es sich befindet. Hierfür ist es wichtig, width: 100% zu verwenden und max-width entsprechend anzupassen oder zu entfernen, damit das Video flexibel die volle Breite ausnutzt. Außerdem sollte das height-Attribut angepasst werden, um das Seitenverhältnis des Videos zu erhalten, ohne dass es verzerrt wird. Hier ein CSS-Code, die das Video auf die volle Breite des Bildschirms strecken sollte, während das Seitenverhältnis beibehalten wird:

<style>
  video {
    display: block;
    width: 100%; /* Setzt die Breite auf 100% des Elternelements */
    height: auto; /* Behält das Seitenverhältnis bei */
    max-width: none; /* Entfernt die maximale Breite Beschränkung */
  }

  @media screen and (max-width: 2000px) {
    video {
      width: 100%; /* Optional: Für spezifische Anpassungen bei kleineren Bildschirmen */
    }
  }
</style>

<video controls autoplay loop playsinline muted>
  <source src="https://cdn.shopify.com/videos/c/o/v/6a70174ffb90450f870bd427b839713c.mp4" />
</video>

Wichtig bei dieser Anpassung ist:

• width: 100%;: Stellt sicher, dass das Video sich über die volle Breite des Elternelements (in diesem Fall vermutlich des Viewports oder eines spezifischen Containers) erstreckt.
• height: auto;: Passt die Höhe automatisch an, um das ursprüngliche Seitenverhältnis des Videos beizubehalten.
• max-width: none;: Entfernt die Beschränkung der maximalen Breite, sodass das Video sich frei ausdehnen kann.

Falls du feststellst, dass das Video dennoch nicht die gesamte Breite einnimmt oder unerwünschte Ränder sichtbar sind, könnte dies auch an umgebenden Elementen oder globalen CSS-Regeln liegen, die den Video-Container beeinflussen. Überprüfe daher auch die umgebenden Elemente und deren Stile.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[mikesch23]

Alles klar. Ich habe es hingekriegt. Vielen Dank dir und schönes Wochenende noch!