How to adapt the size of a background looping video for mobile and desktop?

AndreaRigoldi
New Member
5 0 0

Hello and thank you to anyone taking the time to resolve this issue.

I've added a video on my home page just under the Header section but I have a couple of problems:
1) The video doesn't cover the entire web page (neither on desktop nor on mobile) and i would like it to be that way.

2) If I hover over the video with the cursor, the pause and the full screen buttons appear: I would like the video to be fully integrated with the store.

The store URL is https://ilpescatorevero.com/ and the Custom Html I've used for the video section is:

<script>
window.addEventListener('load', videoScroll);
window.addEventListener('scroll', videoScroll);
function videoScroll() {
  if ( document.querySelectorAll('video[autoplay]').length > 0) {
    var windowHeight = window.innerHeight,
        videoEl = document.querySelectorAll('video[autoplay]');
    for (var i = 0; i < videoEl.length; i++) {
      var thisVideoEl = videoEl[i],
          videoHeight = thisVideoEl.clientHeight,
          videoClientRect = thisVideoEl.getBoundingClientRect().top;
      if ( videoClientRect <= ( (windowHeight) - (videoHeight*.5) ) && videoClientRect >= ( 0 - ( videoHeight*.5 ) ) ) {
        thisVideoEl.play();
      } else {
        thisVideoEl.pause();
      }
    }
  }
}
</script>
<video autoplay="" muted="" loop="" controls="controls" src="https://cdn.shopify.com/s/files/1/0584/4703/6591/files/VIDEO_HOME_PAGE.mp4?v=1626037875" type="video/mp4" width="100%" height="600%">"."</video>
0 Likes