Produkt UGC-videoseksjon

<stil>
.ugc-videos-container {
display: flex;
rettferdiggjøre-innhold: mellomrom-mellom;
}
.ugc-video-wrapper {
stilling: pårørende;
bredde: 32 %; /* Juster basert på dine behov */
polstring-topp: 56,25 %; /* 9:16 sideforhold (16/9*100) */
overløp: skjult;
kantradius: 15px; /* Juster radiusen etter behov */
}
.ugc-video-wrapper video {
posisjon: absolutt;
topp: 0;
venstre: 0;
bredde: 100 %;
høyde: 100 %;
objekttilpasning: cover;
kantradius: 15px; /* Sørger for at selve videoen har avrundede hjørner */
}
.ugc-video-wrapper .play-pause-icon {
posisjon: absolutt;
topp: 50%;
venstre: 50 %;
transform: translate(-50%, -50%);
z-indeks: 2;
markør: peker;
bredde: 40px;
høyde: 40px;
}
.ugc-video-wrapper video.show-controls {
display: blokk;
}
</style>

{% if product.metafields.custom.ugc_1_ or product.metafields.custom.ugc_2_ or product.metafields.custom.ugc_3_ %}
<p style="font-weight: 700;"> Få inspirasjon til hvordan du kan style den!</p>
<div class="ugc-videos-container">

<div class="ugc-video-wrapper">
<video id="ugc-video-1" dempet loop>
<source src=" {{ product.metafields.custom.ugc_1_ | file_url }} " type="video/mp4">
Nettleseren din støtter ikke video-taggen.
</video>
<div class="play-pause-icon" onclick="playVideo(1)">
<svg id="icon-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
<polygon points="5,3 19,12 5,21"></polygon> <!-- Spilleikon -->
</svg>
</div>
</div>

<div class="ugc-video-wrapper">
<video id="ugc-video-2" dempet loop>
<source src=" {{ product.metafields.custom.ugc_2_ | file_url }} " type="video/mp4">
Nettleseren din støtter ikke video-taggen.
</video>
<div class="play-pause-icon" onclick="playVideo(2)">
<svg id="icon-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
<polygon points="5,3 19,12 5,21"></polygon> <!-- Spilleikon -->
</svg>
</div>
</div>

<div class="ugc-video-wrapper">
<video id="ugc-video-3" dempet loop>
<source src=" {{ product.metafields.custom.ugc_3 | file_url }} " type="video/mp4">
Nettleseren din støtter ikke video-taggen.
</video>
<div class="play-pause-icon" onclick="playVideo(3)">
<svg id="icon-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white">
<polygon points="5,3 19,12 5,21"></polygon> <!-- Spilleikon -->
</svg>
</div>
</div>
</div>
{% endif %}

<script>
function playVideo(indeks) {
var video = document.getElementById('ugc-video-' + index);
var playIcon = document.getElementById('icon-' + index).parentNode;

video.muted = falsk;
video.play(); // Spill av videoen
video.setAttribute("kontroller", "kontroller"); // Vis kontroller
playIcon.style.display = 'ingen'; // Skjul avspillingsknappen
}
</script>