Video Hintergrund mit Text anpassen

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

Ein Nutzer hat ein vollflächiges Hintergrundvideo mit Text im Webshop implementiert, möchte aber den Text in einem Wrapper mit maximaler Breite (wie der Rest der Seite) zentrieren, anstatt ihn linksbündig mit Padding zu positionieren.

Lösungsansatz:

  • Anpassung von HTML und CSS erforderlich
  • Erstellung einer CSS-Klasse .text-wrapper mit max-width: 1200px und margin: auto zur Zentrierung
  • Änderung von justify-content: flex-start zu center in der .hero-Klasse

Technische Details:

  • Code-Beispiele für .video-bg, .hero und .text-wrapper wurden bereitgestellt
  • Media Queries für responsive Anpassungen bei kleineren Bildschirmen (max-width: 600px)

Ergebnis:
Das Problem wurde erfolgreich gelöst. Der Nutzer hatte zusätzlichen Code an anderen Template-Stellen, der die CSS-Klassen beeinflusste. Nach Bereinigung und Anpassungen funktioniert die Zentrierung wie gewünscht.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hallo zusammen,

ich habe geschafft (mit Code - gefunden aus mehreren Stellen :D) das im Webshop ein Video im Hintergrund vollflächig ist, mit Text darauf. das passt soweit! Gerne würde ich den Text aber in einem “Wrapper” max. Breite wie der Rest des Inhaltes haben. Im Moment ist der Text einfach mit einem padding-left willkürlich gesetzt.

Das Ganze kann angesehen werden:
www.lumabloom.de (VIP-Login: lumabloom24)

Anbei eine Skizze wie es sein sollte.

Danke im Voraus

2

Hey @lumabloom

Du müsstest den HTML und CSS anpassen oder den bestehenden HTML-Code beibehalten und nur die CSS-Klassen anpassen, um den gewünschten Effekt zu erzielen. Erstelle eine CSS-Klasse für den Wrapper, um die maximale Breite festzulegen und den Text zu zentrieren.

Hier ein CSS Beispiel:

.video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    filter: blur(0px) opacity(1);
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    margin-bottom: 0px;
    min-height: 75vh;
    position: relative;
    overflow: hidden;
}

.text-wrapper {
    max-width: 1200px; /* Maximale Breite des Wrappers */
    width: 100%;
    padding: 1.5em;
    box-sizing: border-box;
    text-align: center;
}

.hero div {
    padding: 1.5em;
}

#shopify-section-template--20774909641046__video_background_Gar8XP .hero {
    margin-bottom: 24px;
    text-align: left;
    display: flex;
    justify-content: center; /* Ändere dies von flex-start zu center */
    align-items: center; /* Ändere dies von flex-start zu center */
}

#shopify-section-template--20774909641046__video_background_Gar8XP .hero > div {
    width: 100%; /* Passt die Breite des inneren divs an */
    max-width: 65rem; /* Setze eine maximale Breite */
    margin-top: 2%;
    margin-left: auto; /* Zentriert das Element horizontal */
    margin-right: auto; /* Zentriert das Element horizontal */
}

#shopify-section-template--20774909641046__video_background_Gar8XP h1 {
    font-weight: bold;
}

@media only screen and (max-width: 600px) {
    #shopify-section-template--20774909641046__video_background_Gar8XP .hero {
        display: none;
    }
}

Erklärung- .text-wrapper: Dieser Wrapper enthält den Text und hat eine maximale Breite (max-width: 1200px), was sicherstellt, dass der Text nicht über diese Breite hinausgeht und zentriert bleibt.

  • margin-left: auto; margin-right: auto;: Diese Eigenschaften zentrieren den Inhalt horizontal innerhalb des Wrappers.
  • max-width und width: Stellen sicher, dass der Wrapper nicht breiter als die festgelegte maximale Breite wird und sich an verschiedene Bildschirmgrößen anpasst.

Hoffe das hilft dir weiter. Bei weiteren Fragen kann ich gerne einen Experten empfehlen! :wink:

3

Danke für deine schnelle Antwort.

Wenn ich nur das css ändere passiert leider nichts.

Habe hier mal den gesamten Code: (Habe deine Änderungen bei eingefügt


  

  # {{ section.settings.heading }}
  {{ section.settings.link_text }}
  

  

{% schema %}
  {
    "name": "Video Background Banner",
    "settings": [
      {
      "type": "text",
      "id": "heading",
      "label": "Overlay text"
    },
      {
      "type": "url",
      "id": "video_url",
      "label": "Enter the video url here"
    },
    {
      "type": "image_picker",
      "id": "poster",
      "label": "Add fallback background image in case video doesn't load"
    },
    {
      "type": "text",
      "id": "link_text",
      "label": "Enter CTA button text (if required)"
    },
      {
      "type": "url",
      "id": "link_url",
      "label": "CTA button link page"
    },
    {
      "type": "range",
      "id": "blur",
      "min": 0,
      "max": 10,
      "step": 0.1,
      "unit": "px",
      "label": "For low quality video add blur",
      "default": 0
    },
    {
      "type": "range",
      "id": "opacity",
      "min": 0,
      "max": 1,
      "step": 0.1,
      "label": "Change video opacity",
      "default": 1
    }
],
  "presets": [
    {
      "name": "Video Background Banner"
    }
  ]
  }
{% endschema %}
4

@Gabe muss ich sonst noch was umbauen? Wir sind nah an der Lösung :grinning_face:

Danke im Voraus für deine Hilfe

5

Hast du das lösen können?

6

Ja vielen Dank für die Nachfrage :slightly_smiling_face:

Ich hatte an anderen Stellen noch Code im Template, dass sich auf die Klassen ausgewirkt hat. Habe dann einiges geändert, etwas gelöscht und irg wie ging es dann :grinning_face_with_smiling_eyes:

7

Super, danke für das Update! Lass uns wissen, ob wir dir sonst noch irgendwie weiterhelfen können.

Was musst du für den Launch des Shops noch alles fertigstellen und ist unsere Checkliste dabei hilfreich?