Banner über looping Video

[BlackBird030]

Hallo Freunde,

ich nutze das Refresh Theme (https://better-naps.de/) und würde nun gerne über mein looping Video auf der Startseite eine Banner legen mit einem kleinen Text sowie Button. Derzeit befindet sich dieses element unter dem Video. Hat da jemand Erfahrung?

[Gabe]

Hey @BlackBird030 

Vorsicht denn dein Shop mit dem Looping Video ganz oben sieht eigentlich ganz gut so und, Tbh, meiner Meinung nach, sähe es komisch aus mit dem Text direkt über dem Video.

Oder meinst du den Text als Overlay Text samt Call-to-Action Button die direkt auf dem Video schweben/platziert sind?

Wenn ja, der Video HTML Code (siehe unten) im theme.liquid nach unten rutschen, was aber messy werden kann vor allem auf Mobile:

<deferred-media class="video-section__media deferred-media no-js-hidden gradient global-media-settings global-media-settings--full-width media-fit-cover scroll-trigger animate--slide-in" data-media-id="47017662808406" style="--ratio-percent: 56.25%;">
     
<video playsinline="playsinline" autoplay="autoplay" loop="loop" controls="controls" muted="muted" preload="metadata" poster="//better-naps.de/cdn/shop/files/preview_images/58e641b61da74e04b4eb83c1060f2eda.thumbnail.0000000000_1100x.jpg?v=1712059700"><source src="https://cdn.shopify.com/videos/c/vp/58e641b61da74e04b4eb83c1060f2eda/58e641b61da74e04b4eb83c1060f2eda.HD-720p-4.5Mbps-26647183.mp4" type="video/mp4"><img src="//better-naps.de/cdn/shop/files/preview_images/58e641b61da74e04b4eb83c1060f2eda.thumbnail.0000000000_1100x.jpg?v=1712059700"></video>

   </deferred-media>

Um den bereitgestellten Text samt Call-to-Action-Button direkt über das Video als Overlay zu positionieren, musst du das Video und das Overlay-Element innerhalb desselben Container-Elements positionieren und CSS verwenden, um das Overlay korrekt auszurichten. Im Folgenden findest du einen angepassten Ansatz, basierend auf deinem Video- und Overlay-Code. 

Integriere das Overlay-Element (deinen Text und den Button) direkt nach dem <video>-Tag innerhalb des gleichen Containers, um sicherzustellen, dass sie zusammengehören:

<div class="video-banner-container" style="position: relative;">
    <deferred-media class="video-section__media ...">
        <!-- Dein Video-Code hier -->
    </deferred-media>
    <!-- Overlay mit Text und Call-to-Action Button -->
    <div class="isolate overlay-content" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;">
      <div class="rich-text content-container color-scheme-2 gradient rich-text--full-width content-container--full-width section-template--21093640470870__rich_text_ck4Nqn-padding">
        <div class="rich-text__wrapper rich-text__wrapper--center page-width">
          <div class="rich-text__blocks center">
            <h2 class="rich-text__heading rte inline-richtext h2 scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
              Schlafprobleme verstehen und beheben. Endlich besser schlafen.
            </h2>
            <div class="rich-text__text rte scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
              <p>Herzlich Willkommen bei <strong>better naps</strong>. Wir versuchen Menschen dabei zu unterstützen, auf natürliche Weise einen gesunden und regelmäßigeren Schlaf zu erlangen. Neben einer vielzahl von Produkten finden Sie auf unserer Seite Informationen über die Ursachen von Schlaflosigkeit, Meditation und Folgen von Schlafproblemen. Viel Spaß beim Entdecken und hoffentlich bald angenehme Träume.</p>
            </div>
            <div class="rich-text__buttons scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
              <a href="/collections/all" class="button button--secondary">zu den Produkten</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

Ich habe bereits Inline-CSS im Overlay-Container (<div class="isolate overlay-content" style="...">) hinzugefügt, um es über das Video zu positionieren. Du kannst jedoch auch separates CSS hinzufügen oder anpassen, um das Design weiter zu verfeinern.

Stelle sicher, dass das Overlay-Element (overlay-content) und das Video sich im selben relativen Container (video-banner-container) befinden, damit die absolute Positionierung des Overlays relativ zu diesem Container erfolgt. Die Eigenschaft display: flex; align-items: center; justify-content: center; im Overlay-Container zentriert den Inhalt sowohl horizontal als auch vertikal über dem Video.

Weitere Anpassungen:

• Responsiveness prüfen: Stelle sicher, dass das Overlay auf verschiedenen Bildschirmgrößen gut aussieht. Du kannst CSS-Media-Queries verwenden, um das Layout auf kleineren Bildschirmen anzupassen.
• Interaktion mit dem Video ermöglichen: Wenn das Overlay den Zugriff auf die Videosteuerungen verhindert, kannst du die Eigenschaft pointer-events: none; zum Overlay-Container hinzufügen und pointer-events: auto; zu den interaktiven Elementen innerhalb des Overlays, um Klicks auf den Button zu ermöglichen.

Dies sollte dir einen soliden Ausgangspunkt bieten, um ein Overlay mit Text und einem Call-to-Action-Button direkt über deinem Looping-Video zu platzieren. Anpassungen an spezifische Designanforderungen und Responsiveness sollten ebenfalls berücksichtigt werden.

Wenn du es selber auf deiner Homepage programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

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.

[BlackBird030]

Hallo Gabe,

vielen Dank für deine schnelle und aufschlussreiche Antwort. Deine Annahme, ich würde das Ganze als Overlay-Element darstellen wollen, ist absolut korrekt! Am liebsten unten links bündig mit dem Rahmen, so etwa wie bei der ordinary-website (https://theordinary.com/en-de). Somit sieht das Video eingebundener aus und bildet quasi einen schönen Hintergrund wie ich finde. 

[Gabe]

@BlackBird030 

Hört sich super an und bin gespannt wie du das lösen wirst! 😉

Mit Video kannst du einen richtigen Sense of Lifestyle rüberbringen, sprich, deine Produkte mit Modells in den 4 Lifestyles anzeigen: zuhause beim chillaxen, in der Arbeit mit den Arbeitskollegen, draussen in der Natur oder beim outdoor sporteln, und beim Ausgehen in der Stadt, zu Partys, Events, Konzerte, Restaurants usw. Das sind alles Dinge die vom Problem der Schlafstörung so richtig gedämmt werden können.

Hast du dir Gedanken gemacht wie du den Shop mehr ansprechend und engaging machen kannst? Dein Hauptthema im Shop ist ja ein wichtiges Thema - die Schlafstörung, und somit hat dein Shop sehr viel Potential ein Leader zu werden in diesem Sektor!

VG,

[BlackBird030]

Ich bin selbst auch gespannt.

Du hast die Message, die ich vermitteln möchte, absolut richtig erkannt. Leider stoße ich bei den Themen "mehr ansprechend und engaging machen" an meine Grenzen. Habe versucht durch die Drop-Down-Menüs die Kunden zum "mitmachen" zu motivieren. Hast du noch weitere Ideen?

[BlackBird030]

Leider bin ich zu unerfahren um deiner Anleitung Folge zu leisten. Wie kann ich Zwei Elemente innerhalb desselben Container-Elements integrieren? Was muss wo rein und wo muss ich den Code wie anpassen? Bin völlig überfragt. Kannst du eine Anfänger-freundliche Schritt-für-Schritt Anleitung geben? Habe Angst, dass ich am Ende mehr verkehrt mache als richtig 😕

[Gabe]

Hey @BlackBird030 

Wie wäre es wenn du mit einem Experten arbeitest der dir helfen kann dein Store zu optimieren? Das sage ich weil 1) ich bloß der Community Moderator bin und nur generelle Tipps abgeben kann und darf oder kann keine Shops optimieren, und 2) weil ein Experte in dein Shop gehen und dir helfen kann, es von Grund auf zu optimieren. Das sage ich auch weil dein Produkt grosses Potenzial hat, da Schlafstörungen fast zur Volkskrankheit geworden sind. Da hast du schonmal ein sehr breites Publikum was die meisten Produkte ja nicht geniessen.

So wie dein Shop Better-Naps aber jetzt ist, ist es noch nicht da wo es sein könnte. Ein Beispiel, wie so ein Shop aussehen könnte? Nur um dir eine Idee zu geben, scrolle mal diese Shop Demo runter um zu sehen, wie dein Shop sein könnte.

Features die diese Shop Demo u.a. hat:

• Richtig ansprechendes Aussehen und Inhalte mit Gesundheit als nicht nur eine einfache Notwendigkeit, sondern da wird das Konzept "Wellbeing as a Sense of Lifestyle" so richtig verkauft und rübergebracht, was in deinem Shop derzeit eher nicht der Fall ist.
• Sehr Interaktiv mit Features wie Parallax Scrolling sowie Scroll-to-Top Button.
• Klasse Call-to-Action Buttons.
• Effektive und modern-aussehende Textabschnitte.
• Horizontal Scrolling-Info-Banner.
• Hochwertige Fotografie - das Brot und Butter eines jeden Online Shops.
• Tolle Multicolumn Abschnitte mit runden Bilder und leicht-zu-lesen Informationen.
• Tolle ausklappbare Akkordeon Info-Abschnitte.
• Tolle Infografiken wie diese hier:

Schau dir mal alleine diesen Video Abschnitt an der auch einen tollen Overlay Text und Call-To-Action Button hat:

So muss dein Shop aussehen und mit so einem Theme wie das Broadcast Theme kannst du das auch ohne einen Experten erreichen. Da brauchst du bloß eins - deine eigene Fantasie und kreatives Denken!

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

[BlackBird030]

Ich werde mich nochmal an die Chromleisten setzen, vielen Dank für die spannenden Anregungen.

Wärst du so lieb und würdest mir nochmal eine kleine ANleitung für den Text als Overlay Text samt Call-to-Action Button die direkt auf dem Video geben?

Schönes und sonniges Wochenende wünsche ich dir!

[Gabe]

Hey @BlackBird030 

Einen Text als Overlay Text in <h1> und <h2> sowie einen klickbaren Call-to-Action Button direkt auf dem Video schwebend zu haben, vielleicht unten rechts, ist, wie gesagt, leider recht komplex und mein Code oben sollte das lösen können.

Weitere Möglichkeiten:

1. Erstelle eine Container-Div: Um alles ordentlich zu verwalten, solltest du zuerst eine Container-Div um dein Video herum erstellen. Diese Container-Div wird als relative positioniert, was bedeutet, dass alle absolut positionierten Kind-Elemente sich relativ zu diesem Container bewegen.

2. Positioniere deine Texte und den Button mit CSS: Du kannst position: absolute; verwenden, um deine <h1>, <h2> Texte und den Button über dem Video zu positionieren. Die bottom und right Eigenschaften helfen dir dabei, sie unten rechts zu positionieren.

Hier ist ein Beispiel, das auf dem vorhandenen HTML-Code deines Videos basiert:

<div style="position: relative;">
    <deferred-media class="video-section__media deferred-media no-js-hidden gradient global-media-settings global-media-settings--full-width media-fit-cover scroll-trigger animate--slide-in" data-media-id="47017662808406" style="--ratio-percent: 56.25%; position: relative;">

        <video playsinline="playsinline" autoplay="autoplay" loop="loop" controls="controls" muted="muted" preload="metadata" poster="//better-naps.de/cdn/shop/files/preview_images/58e641b61da74e04b4eb83c1060f2eda.thumbnail.0000000000_1100x.jpg?v=1712059700">
            <source src="https://cdn.shopify.com/videos/c/vp/58e641b61da74e04b4eb83c1060f2eda/58e641b61da74e04b4eb83c1060f2eda.HD-720p-4.5Mbps-26647183.mp4" type="video/mp4">
            <img src="//better-naps.de/cdn/shop/files/preview_images/58e641b61da74e04b4eb83c1060f2eda.thumbnail.0000000000_1100x.jpg?v=1712059700">
        </video>

        <!-- Overlay-Inhalte -->
        <h1 style="position: absolute; bottom: 20%; right: 5%; color: white; z-index: 100;">Überschrift 1</h1>
        <h2 style="position: absolute; bottom: 15%; right: 5%; color: white; z-index: 100;">Überschrift 2</h2>
        <a href="#" style="position: absolute; bottom: 10%; right: 5%; color: white; background-color: red; padding: 10px; z-index: 100;">Call to Action</a>
        
    </deferred-media>
</div>

Wichtige Punkte:

• Der z-index stellt sicher, dass dein Text und Button über dem Video erscheinen.
• Die bottom und right Werte kannst du anpassen, um die genaue Positionierung deiner Elemente zu steuern.
• Der color und background-color für den Text und den Button können nach deinem Design angepasst werden.

Weitere Ressourcen per einer Google Suche gefunden:

Eine Google Suche und die Community bieten verschiedene Lösungen, um Texte und klickbare Call-to-Action (CTA) Buttons direkt auf Videos zu platzieren. Hier sind einige Kernpunkte basierend auf den Informationen, die ich gefunden habe:

1. Text über Video platzieren: Eine Methode besteht darin, das Video in einem Container mit position: relative; zu platzieren und den Overlay-Text oder -Button mit position: absolute; zu positionieren. Dies ermöglicht es, den Text oder Button relativ zum Videocontainer zu positionieren. Du kannst den Text in einem <div> mit der Klasse overlay platzieren und diesen dann mit CSS entsprechend anpassen, um ihn über das Video zu legen​ (CodeWithRandom)​.

2. CSS für Overlay-Play Button: Für das Hinzufügen eines Overlay-Play-Buttons über einem HTML5-Video kannst du ebenfalls position: absolute; für den Button verwenden, um ihn über das Video zu legen. Dabei ist wichtig, die z-index Eigenschaft zu nutzen, um sicherzustellen, dass der Button über dem Video angezeigt wird. JavaScript kann verwendet werden, um den Play/Pause-Status des Videos beim Klick auf den Button zu steuern​ (Codeconvey)​.

3. Allgemeine Overlay Erstellung: W3Schools bietet ein Tutorial, wie man ein allgemeines Overlay mit CSS erstellt, das die Grundlagen der Positionierung und Gestaltung eines Overlays über einem anderen Element erläutert. Dies kann auf Texte und Buttons, die über Videos schweben sollen, angewendet werden​ (W3Schools)​.

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

[BlackBird030]

Hallo @Gabe ,

schau mal, https://better-naps.de/, es geht voran. Leider wird das Video nun nicht über die ganze Breite dargestellt was sehr schade ist. Zeitgleich wird das Video auf der Mobil-Ansicht viel zu groß angezeigt (siehe unten) 😕 Hast du da eine Idee wie das Video responsive über die ganze breite angezeigt werden kann?

Habe das Ganze nun mit deinem Code über ein Benutzerdefiniertes Liquid umgesetzt.

<deferred-media class="video-section__media deferred-media no-js-hidden gradient global-media-settings global-media-settings--full-width media-fit-cover scroll-trigger animate--slide-in" data-media-id="47017662808406" style="--ratio-percent: 100,00%;">

<video playsinline="playsinline" autoplay="autoplay" loop="loop" controls="controls" muted="muted" preload="metadata" poster="//better-naps.de/cdn/shop/files/preview_images/58e641b61da74e04b4eb83c1060f2eda.thumbnail.0000000000_1100x.jpg?v=1712059700"><source src="https://cdn.shopify.com/videos/c/vp/58e641b61da74e04b4eb83c1060f2eda/58e641b61da74e04b4eb83c1060f2ed..." type="video/mp4"><img src="//better-naps.de/cdn/shop/files/preview_images/58e641b61da74e04b4eb83c1060f2eda.thumbnail.0000000000_1100x.jpg?v=1712059700"></video>

<div class="video-banner-container" style="position: width;">
<deferred-media class="video-section__media ...">
<!-- https://cdn.shopify.com/videos/c/o/v/58e641b61da74e04b4eb83c1060f2eda.mp4 -->
</deferred-media>
<!-- Overlay mit Text und Call-to-Action Button -->
<div class="isolate overlay-content" style="position: absolute; top: 0; left: 50; width: 100%; height: 170%; display: flex; align-items: center; justify-content: center; text-align: center;">
<div class="rich-text content-container color-scheme-2 gradient rich-text--full-width content-container--full-width section-template--21093640470870__rich_text_ck4Nqn-padding">
<div class="rich-text__wrapper rich-text__wrapper--center page-width">
<div class="rich-text__blocks center">
<h2 class="rich-text__heading rte inline-richtext h2 scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
Schlafprobleme verstehen und beheben. Endlich besser schlafen.
</h2>
<div class="rich-text__text rte scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
<p>Herzlich Willkommen bei <strong>better naps</strong>. Wir versuchen Menschen dabei zu unterstützen, auf natürliche Weise einen gesunden und regelmäßigeren Schlaf zu erlangen. Neben einer vielzahl von Produkten finden Sie auf unserer Seite Informationen über die Ursachen von Schlaflosigkeit, Meditation und Folgen von Schlafproblemen. Viel Spaß beim Entdecken und hoffentlich bald angenehme Träume.</p>
</div>
<div class="rich-text__buttons scroll-trigger animate--slide-in" data-cascade="" style="--animation-order: 0;">
<a href="/collections/all" class="button button--secondary">zu den Produkten</a>
</div>
</div>
</div>
</div>
</div>
</div>

</deferred-media>

[Gabe]

Hey @BlackBird030 

Ja das ist in der Tat blöd. Wird das auch so auf dem Google Chrome Browser gerendert, denn ich sehe du verwendest Safari? Kannst du es mal auf Chrome probieren?

Das ganze ist auch nicht so einfach denn jegliche CSS Code Ergänzung werden einen Dominoeffekt auf andere Bereich haben. Dagegen können wir nicht viel tun.

Das responsive Design von Videos ist auch ziemlich knifflig, vor allem, wenn du unterschiedliche Verhaltensweisen auf Desktop- und Mobilgeräten erreichen möchtest. Hier sind einige Vorschläge, wie du das Video so einstellen kannst, dass es auf beiden Gerätetypen korrekt dargestellt wird.

1. Verwendung von CSS-Media-Queries: Mit Media-Queries kannst du bestimmte Stile anwenden, abhängig von der Bildschirmgröße des Geräts. Du könntest die Höhe und Breite des Videos für Mobil- und Desktopansichten entsprechend anpassen.

2. Relative Einheiten: Verwende relative Einheiten wie Prozent (%) statt fester Pixelwerte für die Breite und Höhe, um die Skalierung auf verschiedenen Bildschirmgrößen zu verbessern.

3. Viewport Units: Verwende Viewport-units (vw für viewport width und vh für viewport height), um das Video responsiv zu gestalten.

4. CSS-Eigenschaft object-fit: Diese Eigenschaft kann auf das <video>-Element angewandt werden, um anzugeben, wie das Video innerhalb des Containers passen soll.

Hier ist ein Beispiel, das diese Maß-Typen verwendet:

/* CSS-Grundlagen für das Video-Element */
.video-section__media video {
  width: 100%; /* Breite auf 100% für volle Breite */
  height: auto; /* Höhe automatisch für das Beibehalten des Seitenverhältnisses */
  object-fit: cover; /* Video deckt den gesamten Container ab */
}

/* Anpassungen für Mobilgeräte */
@media (max-width: 768px) {
  .video-section__media video {
    height: 50vh; /* Stelle eine maximale Höhe ein, um das Video auf Mobilgeräten nicht zu groß anzuzeigen */
  }
}

Das object-fit: cover; sorgt dafür, dass das Video den Container vollständig abdeckt, ohne sein Seitenverhältnis zu verlieren. Die Media Query begrenzt dann die Höhe des Videos auf Mobilgeräten, um zu verhindern, dass es zu groß dargestellt wird.

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