FROM CACHE - de_header

Video Hintergrund mit Text anpassen

Video Hintergrund mit Text anpassen

lumabloom
Tourist
6 0 0

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

4 ANTWORTEN 4

Gabe
Shopify Staff
18475 2897 4264

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

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

lumabloom
Tourist
6 0 0

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 <style> </style> eingefügt 

<div class="hero">
  <div>
  <h1>{{ section.settings.heading }}</h1>
  <a class='button' href='{{ section.settings.link_url }}'>{{ section.settings.link_text }}</a>
  </div>
  <video class="video-bg" autoplay muted loop playsinline poster={{ section.settings.poster }}>
  	<source src={{ section.settings.video_url }} type='video/mp4'>
  </video>
</div>

{% 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 %}

<style>
.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;
    }
}

</style>

 

 

lumabloom
Tourist
6 0 0

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

Danke im Voraus für deine Hilfe 

Gabe
Shopify Staff
18475 2897 4264

Hast du das lösen können?

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog