Backround Video Html-Code

Topic summary

Hintergrund: Im Shopify-Theme „Ride“ wird ein eigenes HTML-/Liquid-Setup für ein Hintergrundvideo genutzt, da der Standard-Video-Abschnitt nur YouTube/Vimeo-Links erlaubt. Der Code funktioniert grundsätzlich, verursacht jedoch beim Hochschieben des Abschnitts, dass nachfolgende Bereiche zu weit nach unten bis über das Seitenende verschoben werden.

Problemkern: Gewünscht ist eine Anpassung des HTML/CSS, um den Abstand (Spacer/Margin/Padding) unter dem Video zu verringern. Ein umfangreiches Liquid-/HTML-Code-Snippet wurde beigefügt und ist zentral für die Fehleranalyse.

Reaktionen:

  • Verweis, die Frage im passenden Coding-Bereich/Leitfaden des Shopify-Forums zu posten (Link bereitgestellt).
  • Nachfrage, welche Art von Videos eingebunden werden soll. Vorschlag, statt Theme-Code-Anpassungen die YouTube-Sichtbarkeit (z. B. „nicht gelistet“) zu nutzen, um ein Promo-Video einzubinden; zusätzlicher Link zu einem Video-Marketing-Beitrag.

Status: Keine konkrete Lösung oder Codeanpassung wurde geliefert. Diskussion offen und abhängig von weiteren Details des Fragestellers.

Summarized with AI on February 17. AI used: gpt-5.

Hallo,

Ich nutze das Theme Ride da ich dort mit dem normalen Video Abschnitt leider nur Links aua YT oder Vimeo hinzufügen kann habe ich nach einem fertigem HTML-Code gesucht.

Nach kurzer Suche habe ich einen gefunden. Dieser Funktioniert auch genauso wie ich ihn haben möchte.

Jetzt zu dem Problem:

Wenn ich den Abschnitt (Video-Backround) nach oben verschiebe an die gewünscht Position schiebt das Video alle anderen Abschnitte zu weit nach unten über das Ende der Seite sogar hinaus.

Meine frage wäre wie ich den HTML-Code abändern kann sodass der Abstands halter unter dem Video geringer wird.

Unten habe ich einmal den Code angefügt.

Vielen dank im vorraus

Mit freundlichen Grüßen

InfinityPrint24 Team

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

{% endif %}
{% if block.settings.title != blank %}# {{ block.settings.title | escape }}{% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% if block.settings.text != blank %}{{ block.settings.text }}
{% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} {{ block.settings.button_label | escape }} {% endif %}

{% else %}

{% if block.settings.title != blank %}# {{ block.settings.title | escape }}{% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { color: {{ block.settings.color_text }}!important; } {%- endstyle -%} {% if block.settings.text != blank %}{{ block.settings.text }}
{% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} {{ block.settings.button_label | escape }} {% endif %}

{% endif %} {%- endfor -%} {% else %}This section doesn’t currently include any content. Add content to this section using the sidebar.
{%- endif -%} {% 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": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

" } }, { "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": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

" } }, { "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 %} ```

@InfinityPrint24

Poste deine Frage doch im Coding Leitfaden hier

Hi InfinityPrint24,

ich helfe dir gerne dabei eine Lösung für die Videos in deinem Shopify Shop zu finden.

Um den Kontext hier besser verstehen zu können, würde ich dich gerne fragen, was für eine Art von Videos du deinem Shopify Shop gerne hinzufügen möchtest?

Falls es darum gehen sollte, dass das Promovideo zum Beispiel nicht so auf YouTube zu finden sein soll, könnte man dies bestimmt mit den Sichtbarkeitseinstellungen bei YouTube regeln und damit Codeänderungen des Themes umgehen. Was meinst du?

Da wir gerade beim Thema Videos sind, dachte ich, könnte dieser Beitrag interessant für dich sein.

Ich freu mich auf deine Antwort.

1 Like