FROM CACHE - de_header

Youtube-Video wird auf Mobile nicht abgespielt

Gelöst

Youtube-Video wird auf Mobile nicht abgespielt

Floowde
Shopify Partner
5 0 0

Ich habe ein Button Programmiert, welcher ein eigebettetes Youtube-Video abspielt. Das funktioniert auf Desktop auch super, allerdings passiert gar nichts, wenn ich auf den Button klicke. Es muss an dem Video liegen, denn wenn ich das Video durch einen Text austausche, funktioniert es. Hinter dem Metafeld verbirgt sich der Einbettungslink von YT. Hier mein Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<label class="produktvideo-wrapper">
<div class="ausklappen">
<input type="checkbox"><i class="fa-solid fa-chevron-up"></i> Video anzeigen
<div class="floow-produktvideo">{{ product.metafields.custom.floow_produktvideo }}</div>

</label>

 

<style>
.ausklappen {
position: fixed;
left: 20px;
bottom: -10px;
border: 1px solid black;
padding: 10px;
background: #fff;
}


.ausklappen input {
display: none;
}


.floow-produktvideo {
position: fixed;
bottom: -200px;
opacity: 0;
left: 50%;
transform: translateX(-50%);
}

.produktvideo-wrapper .ausklappen input:checked ~.fa-solid.fa-chevron-up {
transform: rotate(180deg);
transition-duration: 0.2s;
}
.produktvideo-wrapper .ausklappen input:not(:checked) ~.fa-solid.fa-chevron-up {
transform: rotate(0deg);
transition-duration: 0.2s;
}
.produktvideo-wrapper .ausklappen input:checked ~.floow-produktvideo {
bottom: 40px;
opacity: 1;
transition: bottom 0.2s linear, opacity 0.2s linear;
}

.floow-produktvideo iframe {
border: 2px solid white;
background-color: black;
padding-top: 30px;
}
}


@media (min-width: 769px) {
.floow-produktvideo iframe {
width: 32vw;
height: calc(18vw + 30px);
}
}


@media (max-width: 768px) {
.floow-produktvideo iframe {
width: 92vw;
height: 51.75vw;
}
}

</style>

{% schema %}
{
"name": "Video Popup",
"settings": [
{
"type": "video",
"id": "video",
"label": "Das passende Metafeld einstellen"
}
],
"presets": [
{
"name": "Video Popup"
}
]
}
{% endschema %}

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff
18317 2876 4237

Erfolg.

Hey @Floowde 

 

Um welches Mobile und Browser handelt es sich? Auf iPhone und Safari gibt es in diesem Bereich oft Einschränkungen leider bzgl. dem Abspielen von YT Videos.

 

Das von dir beschriebene Problem könnte also durch unterschiedliche Faktoren verursacht werden, insbesondere im Hinblick auf die Funktionsweise von eingebetteten YouTube-Videos auf mobilen Geräten. Unten habe ich jetzt für ein paar Lösungsansätze in unseren Foren und auf Google gefunden die ich jetzt auflisten werde:

1. Event Handling auf Mobilen Geräten

  • Touch-Events: Mobile Browser verarbeiten Klick-Events oft anders als Desktop-Browser. Stelle sicher, dass dein JavaScript (falls verwendet) sowohl Click- als auch Touch-Events abfängt.
  • JavaScript Delegation: Wenn du JavaScript benutzt, um das Verhalten des Buttons zu steuern, überprüfe, ob Event-Delegation korrekt implementiert ist, um sicherzustellen, dass Events auf mobilen Geräten richtig erkannt werden.

2. Iframe-Einbettung und Mobile Browser

  • Iframe-Einstellungen: Einige Einstellungen im <iframe>-Tag des YouTube-Videos könnten das Abspielen auf mobilen Geräten beeinträchtigen. Überprüfe, ob Attribute wie width, height und frameborder korrekt gesetzt sind.
  • Responsive Design: Stelle sicher, dass der Iframe-Container und das Iframe selbst für mobile Ansichten optimiert sind (was du mit den Media Queries bereits zu tun scheinst).

3. HTML- und CSS-Struktur

  • Z-Index Überprüfen: Stelle sicher, dass der Z-Index deines Video-Containers korrekt gesetzt ist, sodass dieser nicht von anderen Elementen auf der Seite überlagert wird.
  • Visibility und Display: Überprüfe, ob CSS-Eigenschaften wie visibility oder display das Anzeigen des Videos auf mobilen Geräten beeinflussen.

4. Überprüfung des Metafeld-Contents

  • Metafeld-Inhalt: Manchmal kann der Inhalt des Metafelds das Problem sein. Überprüfe, ob das Metafeld korrekt konfiguriert ist und der Iframe-Code für das YouTube-Video korrekt ausgegeben wird.

5. Testen auf verschiedenen Geräten

  • Geräteübergreifendes Testen: Teste die Funktionalität auf verschiedenen mobilen Geräten und Browsern, um festzustellen, ob das Problem gerätespezifisch ist.

6. JavaScript- und Browser-Konsole

  • JavaScript-Debugging: Verwende die Browser-Konsole auf deinem Mobilgerät, um festzustellen, ob JavaScript-Fehler auftreten, die das Abspielen des Videos verhindern könnten.

7. Überprüfung der Shopify Theme-Dokumentation

  • Theme-Dokumentation: Überprüfe die Dokumentation deines Shopify-Themes, um zu sehen, ob es spezifische Anweisungen oder Einschränkungen für eingebettete Videos gibt.

Das Problem könnte also aus einer Kombination aus CSS-, HTML- und JavaScript-Aspekten bestehen die du überprüfen müsstest um ggf. Anpassungen vorzunehmen. Wenn das Problem weiterhin besteht, könnte es hilfreich sein, einen unserer zertifizierten Webentwickler zu konsultieren, der Erfahrung mit responsiven Design und mobilen Web-Technologien hat.

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

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2

Floowde
Shopify Partner
5 0 0

Wenn ich auf dem PC die Mobile-Ansicht starte, funktioniert es auch. Nur auf dem Handy selbst nicht.

Gabe
Shopify Staff
18317 2876 4237

Erfolg.

Hey @Floowde 

 

Um welches Mobile und Browser handelt es sich? Auf iPhone und Safari gibt es in diesem Bereich oft Einschränkungen leider bzgl. dem Abspielen von YT Videos.

 

Das von dir beschriebene Problem könnte also durch unterschiedliche Faktoren verursacht werden, insbesondere im Hinblick auf die Funktionsweise von eingebetteten YouTube-Videos auf mobilen Geräten. Unten habe ich jetzt für ein paar Lösungsansätze in unseren Foren und auf Google gefunden die ich jetzt auflisten werde:

1. Event Handling auf Mobilen Geräten

  • Touch-Events: Mobile Browser verarbeiten Klick-Events oft anders als Desktop-Browser. Stelle sicher, dass dein JavaScript (falls verwendet) sowohl Click- als auch Touch-Events abfängt.
  • JavaScript Delegation: Wenn du JavaScript benutzt, um das Verhalten des Buttons zu steuern, überprüfe, ob Event-Delegation korrekt implementiert ist, um sicherzustellen, dass Events auf mobilen Geräten richtig erkannt werden.

2. Iframe-Einbettung und Mobile Browser

  • Iframe-Einstellungen: Einige Einstellungen im <iframe>-Tag des YouTube-Videos könnten das Abspielen auf mobilen Geräten beeinträchtigen. Überprüfe, ob Attribute wie width, height und frameborder korrekt gesetzt sind.
  • Responsive Design: Stelle sicher, dass der Iframe-Container und das Iframe selbst für mobile Ansichten optimiert sind (was du mit den Media Queries bereits zu tun scheinst).

3. HTML- und CSS-Struktur

  • Z-Index Überprüfen: Stelle sicher, dass der Z-Index deines Video-Containers korrekt gesetzt ist, sodass dieser nicht von anderen Elementen auf der Seite überlagert wird.
  • Visibility und Display: Überprüfe, ob CSS-Eigenschaften wie visibility oder display das Anzeigen des Videos auf mobilen Geräten beeinflussen.

4. Überprüfung des Metafeld-Contents

  • Metafeld-Inhalt: Manchmal kann der Inhalt des Metafelds das Problem sein. Überprüfe, ob das Metafeld korrekt konfiguriert ist und der Iframe-Code für das YouTube-Video korrekt ausgegeben wird.

5. Testen auf verschiedenen Geräten

  • Geräteübergreifendes Testen: Teste die Funktionalität auf verschiedenen mobilen Geräten und Browsern, um festzustellen, ob das Problem gerätespezifisch ist.

6. JavaScript- und Browser-Konsole

  • JavaScript-Debugging: Verwende die Browser-Konsole auf deinem Mobilgerät, um festzustellen, ob JavaScript-Fehler auftreten, die das Abspielen des Videos verhindern könnten.

7. Überprüfung der Shopify Theme-Dokumentation

  • Theme-Dokumentation: Überprüfe die Dokumentation deines Shopify-Themes, um zu sehen, ob es spezifische Anweisungen oder Einschränkungen für eingebettete Videos gibt.

Das Problem könnte also aus einer Kombination aus CSS-, HTML- und JavaScript-Aspekten bestehen die du überprüfen müsstest um ggf. Anpassungen vorzunehmen. Wenn das Problem weiterhin besteht, könnte es hilfreich sein, einen unserer zertifizierten Webentwickler zu konsultieren, der Erfahrung mit responsiven Design und mobilen Web-Technologien hat.

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