Video Hintergrund Buggt bei mir bei Mobile Ansicht ( Menü Leiste wird überdeckt

[Miseru]

Mein Video überdeckt leider die ansicht bei Mobile wie kann ich das am besten fixen oder könnte mir da jemand kurz helfen. Discord Name : fabich_youtube

[Gabe]

Hey @Miseru 

Wenn dein Video die Menüleiste überdeckt ist das KEIN out-of-the-box 🐞 des Themes, sondern eher aufgrund Änderungen, die ihr oder eine Frontend App zum Theme Code gemacht habt, und es scheinen sehr viele Frontend Apps auf der homepage aktiv zu sein wie man hier sieht:

Um das Problem zu beheben, dass der Video-Banner das Popout-Hamburger-Menü auf Mobilgeräten überlagert, kannst du die Z-Index-Werte in deinem CSS anpassen. Der Z-Index kontrolliert die Stapelreihenfolge von Elementen, die sich überlagern könnten. Ein Element mit einem höheren Z-Index wird immer über einem Element mit einem niedrigeren Z-Index angezeigt.

Füge zum CSS für das Hamburger-Menü einen Z-Index hinzu, der höher ist als der des Video-Banners. Angenommen, wir setzen den Z-Index des Video-Banners auf 10, dann sollten wir dem Menü einen höheren Wert geben, z.B. 100:

.menu-drawer-container {
  z-index: 100; /* Stellt sicher, dass das Menü über dem Video-Banner liegt */
}

Wenn du den Z-Index des Video-Banners explizit setzen möchtest (um Konflikte mit anderen Elementen zu vermeiden), kannst du ihm einen niedrigeren Wert als dem Menü geben. Dies ist optional, wenn der Banner standardmäßig einen niedrigeren Z-Index hat.

.videoBackground {
  z-index: 10; /* Stellt sicher, dass der Video-Banner hinter dem Menü liegt */
}

Stelle sicher, dass du diese CSS-Regeln in deinem Theme CSS Editor hinzufügst oder aktualisierst. Es ist auch wichtig zu beachten, dass die Z-Index-Werte nur wirken, wenn das Element (oder ein Vorfahre) eine Positionierung hat, die nicht static ist (z.B. relative, absolute, fixed oder sticky). Basierend auf deinem vorhandenen Code scheint dies der Fall zu sein, aber es ist gut, dies im Hinterkopf zu behalten, falls du weitere Anpassungen vornimmst.

Wenn das ein Shopify Theme ist, dann können wir das ggf. 👀 ...als Teil deiner 60-Min Design Time dass du mit einem Shopify Free Theme bekommst. Unser Support kann aber nur helfen wenn ihr das Code nicht grundliegend geändert habt, oder mit einer Frontend App. Um dir dabei behilflich zu sein, sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

Frontend Apps können auch ein Theme auch aus den Theme Updates ausschließen wenn das Theme Code geändert wird. Siehe dazu bitte die App Dokumentation.

[Miseru]

Dankeschön werde es heute mittag ausprobieren 🙂 und danke für deine zeit 🥰

[Gabe]

Gerne! 😉

[Miseru]

kriege es irgendwie nicht hin x3 zu lost dafür habe es bei Theme Unter  Abschnitte Video-Backround.liquid erstellt 

Was muss ich da genau ändern oder geht das so nicht 😮 ?

Code : 

Spoiler

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%}

{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if block.type == 'video' %}

<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">

{%- if block.settings.video_link != blank -%}

<div class="fullscreen-video-wrap">

<video class="video-js" loop autoplay preload="none" muted playsinline

poster="https:{{ block.settings.video_image | img_url: 'master' }}">

<source src="{{ block.settings.video_link }}" type="video/mp4">

</video>

</div>

{% endif %}

<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>

<div class="videoBoxInfo">

{% if block.settings.title != blank %}

<h1 class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">

{{ block.settings.title | escape }}

</h1>

{% endif %}

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

{% if block.settings.text != blank %}

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% else %}

<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">

<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>

<div class="imageBoxInfo">

{% if block.settings.title != blank %}

<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">

{{ block.settings.title | escape }}

</h1>

{% endif %}

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

{% if block.settings.text != blank %}

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% endif %}

{%- endfor -%}

{% else %}

<div class="placeholderNoblocks">

      This section doesn’t currently include any content. Add content to this section using the sidebar.

    </div>

{%- endif -%}

<style>

body.template-index .main-content .videoBackground {

margin-top: -55px;

}

.videoBackground {

position: relative;

}

.videoBackground .fullscreen-video-wrap {

position: absolute;

top: 0;

left: 0;

min-width: 100%;

width: 100%;

height: 100%;

overflow: hidden;

}

.videoBackground .fullscreen-video-wrap .video-js {

position: absolute;

top: 0;

left: 0;

min-height: 100%;

min-width: 100%;

width: 100%;

height: 100%;

object-fit: cover;

}

.videoBackground .fullscreen-video-wrap video {

min-height: 100%;

min-width: 100%;

object-fit: cover;

}

.videoBackground .videoBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

min-height: 500px;

      max-height: 800px;

        height: calc(100vh - 165px);

position: relative;

}

.videoBackground .imageBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

position: relative;

min-height: calc(100vh - 165px);

height: auto;

}

.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {

z-index: 2;

text-align: center;

}

.videoBackground .overlay {

content: "";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: #000;

z-index: 1;

}

.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {

-moz-user-select: none;

-ms-user-select: none;

-webkit-user-select: none;

user-select: none;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

display: inline-block;

width: auto;

text-decoration: none;

text-align: center;

vertical-align: middle;

cursor: pointer;

border: 1px solid transparent;

border-radius: 2px;

padding: 8px 15px;

font-style: normal;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.06em;

white-space: normal;

font-size: 14px;

margin-top: 20px;

}

.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {

color: #FFF;

font-size: 30px;

line-height: 40px;

}

.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {

max-width: 500px;

margin: 0 auto;

}

.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {

font-size: 18px;

line-height: 28px;

}

.videoBackground .placeholderNoblocks {

text-align: center;

max-width: 500px;

margin: 0 auto;

}

    @media screen and (max-width: 767px) {

body.template-index .main-content .videoBackground {

margin-top: -35px;

}

.videoBackground .fullscreen-video-wrap {

z-index: 3;

}

.videoBackground .videoBox {

          min-height: 500px;

          height: 100%;

          position: relative;

padding: 0;

      }

.videoBackground .fullscreen-video-wrap {

position: relative;

min-height: 300px;

}

.videoBackground .videoBoxInfo {

padding: 40px 20px;

    background: #000;

width: 100%;

}

    }

</style>

{% schema %}

{

"name": {

"en": "Video Background"

},

"class": "videoBackground",

"max_blocks": 1,

"blocks": [

{

"type": "video",

"name": "Video",

"settings": [

{

"type": "url",

"id": "video_link",

"label": {

"en": "Video link"

}

},

{

"type": "image_picker",

"id": "video_image",

"label": {

"en": "Cover image"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"label": {

"en": "Heading"

},

"default": "Video slide"

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

},

{

"type": "image",

"name": "Image",

"settings": [

{

"type": "color",

"id": "color_bg",

"label": {

"en": "Background color (optional)"

},

"default": "#16165b"

},

{

"type": "image_picker",

"id": "image_bg",

"label": {

"en": "or use an image (required)"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"default": "Image slide",

"label": {

"en": "Heading"

}

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

}

],

"presets": [

{

"name": {

"en": "Video Background"

},

"category": {

"en": "Main"

},

"blocks": [

{

"type": "video"

}

]

}

]

}

{% endschema %}  

[Miseru]

Dankeschön hab es  endlich hingekriegt nach 1h Struggeln xD ❤️  bin halt Ganz am Anfang am lernen wie das geht kenne mich da halt noch 0 aus 🙂 Wie findest du sonst das Design so :D?

[Gabe]

@Miseru 

Super freut mich dass du das hingebogen hast und gerne gebe ich etwas feedback -> siehe diesen in meinem kurzen Video hier.

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

[Miseru]

Kannst du mir helfen :o?

[Gabe]

Hey @Miseru 

Kann es sein, dass du das Video Code direkt in den Code des Dropdown-Menüs eingefügt hast?? Wenn ja, dann ist es am falschen Ort und du wirst den Code woanders verschieben müssen. Daher ist dein Theme Code jetzt wahrscheinlich nicht mehr ganz gesund und müsstest einen Experten Programmierer rannehmen oder mit einer frischen Kopie deines Themes wieder von vorne starten leider.

Wenn das nicht zutrifft, dann um das Überlagerungsproblem in deinem Shopify-Theme zu beheben, bei dem das Video-Banner das Popout-Hamburger-Menü auf Mobilgeräten überdeckt, musst du den Z-Index der betroffenen Elemente anpassen. Das Hauptproblem scheint zu sein, dass das Video-Banner (videoBackground) und das Popout-Hamburger-Menü unterschiedliche Z-Index-Werte benötigen, damit das Menü über dem Video-Banner angezeigt wird, wenn es geöffnet ist. Du musst den CSS-Teil deines Codes anpassen, um sicherzustellen, dass der Z-Index des Menüs höher ist als der des Video-Banners. In deinem aktuellen Code sehe ich keinen spezifischen CSS-Selektor für das Hamburger-Menü, daher gehe ich davon aus, dass wir einen allgemeinen Ansatz verfolgen müssen.

Basierend auf deinem Code scheint das Video-Banner bereits eine Positionierung zu haben, was gut ist. Du hast zwar keinen expliziten Z-Index für das Banner gesetzt, aber wir können einen hinzufügen, um Konflikte zu vermeiden.

Da wir den spezifischen CSS-Selektor für das Hamburger-Menü nicht kenne, gebe ich dir einen allgemeinen und diesen Selektor durch den tatsächlichen CSS-Selektor deines Menüs ersetzen.

Füge die folgenden CSS-Regeln zu deinem vorhandenen CSS hinzu oder aktualisiere sie:

/* Stellt sicher, dass das Video-Banner hinter dem Menü liegt */
.videoBackground {
  z-index: 10;
  position: relative; /* Falls noch nicht gesetzt */
}

/* Ersetze '.menu-selector' durch den tatsächlichen Selektor deines Menüs */
.menu-selector {
  z-index: 100;
  position: relative; /* Wichtig, falls noch nicht gesetzt */
}

Falls du Schwierigkeiten hast, den spezifischen Selektor für dein Hamburger-Menü in der Chrome Developer Console zu finden, musst du in den HTML- oder JS-Dateien deines Themes nachsehen, welche Klasse oder ID verwendet wird, um das Menü zu steuern. 

Bitte beachte:

Wenn du es selber 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!