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