{% assign product_video = product.metafields.custom.product_video.value %}

{% if product_video != blank %}

<div id=”floating-product-video” class=”floating-product-video”>

<button
type=”button”
class=”floating-video-close”
onclick=”document.getElementById(‘floating-product-video’).remove();”
aria-label=”Close video”
>
×
</button>

{{ product_video | video_tag:
autoplay: true,
loop: true,
muted: true,
controls: false,
playsinline: true,
loading: ‘eager’,
class: ‘floating-product-video-player’
}}

</div>

<style>
.floating-product-video {
position: fixed !important;
right: 20px !important;
bottom: 20px !important;

width: 110px !important;
height: 195px !important;

z-index: 2147483647 !important;

overflow: hidden !important;
background: #000 !important;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);

margin: 0 !important;
padding: 0 !important;
}

.floating-product-video-player {
width: 100% !important;
height: 100% !important;

object-fit: cover !important;

display: block !important;
margin: 0 !important;
padding: 0 !important;
}

.floating-video-close {
position: absolute !important;
top: 8px !important;
right: 8px !important;

width: 30px !important;
height: 30px !important;

padding: 0 !important;
margin: 0 !important;

border: none !important;
border-radius: 50% !important;

background: rgba(0, 0, 0, 0.65) !important;
color: #fff !important;

font-size: 24px !important;
line-height: 30px !important;

cursor: pointer;
z-index: 999999 !important;

display: flex !important;
align-items: center;
justify-content: center;
}

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

.floating-product-video {
width: 95px !important;
height: 169px !important;

right: 12px !important;
bottom: 15px !important;
}

.floating-video-close {
width: 27px !important;
height: 27px !important;

top: 6px !important;
right: 6px !important;

font-size: 21px !important;
line-height: 27px !important;
}

}
</style>

<script>
document.addEventListener(‘DOMContentLoaded’, function () {

const video = document.querySelector(
‘#floating-product-video video’
);

if (!video) return;

video.muted = true;
video.autoplay = true;
video.loop = true;
video.playsInline = true;

video.setAttribute(‘muted’, ”);
video.setAttribute(‘autoplay’, ”);
video.setAttribute(‘playsinline’, ”);

video.play().catch(function(error) {
console.log(‘Autoplay prevented:’, error);
});

});
</script>

{% endif %}