Need guidance - background video (Safari)

[tpolland]

I’m new to bubble and such, and I am looking for guidance from the guru’s out there…

What I’m trying to accomplish:

• Have a 25-second video autoplay as a background on the index page
• The browser can choose between a poster image, MP4, or WebM format
• Support Microsoft Edge, Chrome, and Apple Safari

What I have tried to accomplish this:

• I purchased a plugin, which was pretty good; however, I could not get the element to be in the background
• I used an HTML element and put in the <video> tags and <source>, which kinda worked and didn’t, as the element showed up at the bottom of the page and not in the background. Also, with Safari, it would not autoplay (which I set in my Safari to allow autoplay on my domain).
• I changed my default layout on the page from “Column” to “Align to parent”, which now I could get the HTML element to go to the background by using the order of elements in the element tree. However, the video will not autoplay and other is a browser play button at the centre of the page. This would be okay, but you cannot click on the play button because the other elements on the page are above the video.

Example of my HTML element

     <video autoplay muted loop playsinline poster="https://image.png" style="position: fixed; top: 0; left: 0; width: 100%; height: calc(100vw * 9 / 16); max-height: 900px; object-fit: cover; z-index: -1;" id="autoplay">
     
        <source src="https://hero-background.mp4" type="video/mp4">
        <source src="https://hero-background.webm" type="video/webm">
    </video>
    
<script>
        window.onload=function(){
            var vid = document.getElementById("autoplay");
            vid.play();
        }
</script>

Can you point me in the right direction?

[tpolland]

Hi All,

I was able to get this work.

1. Autoplays video in all browsers except Apple Safari (Desktop and Mobile)
2. Does not show the Apple Safari video browser play button
3. For Apple Safari - It will detect any mouse movement or click to play the video (yay!)

[tpolland]

Here is a revised version that matches the responsive devices screens.

<video muted loop playsinline poster="hero-background.png" id="video">
  <source src="https://background.mp4" type="video/mp4">
  <source src="https://background.webm">
</video>

<style>
  #video {
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 100vw; 
    object-fit: cover; 
    z-index: -1; 
    transform: translateX(-50%);
  }
</style>

<script>
  function resizeVideo() {
    const video = document.getElementById('video');
    const viewportWidth = window.innerWidth;

    if (viewportWidth <= 320) {
      video.style.height = '594px';
    } else if (viewportWidth > 320 && viewportWidth <= 768) {
      video.style.height = '584px';
    } else if (viewportWidth > 768 && viewportWidth <= 992) {
      video.style.height = '687px';
    } else {
      video.style.height = '900px';
    }
  }

  // Resize the video when the page loads
  window.onload = function() {
    resizeVideo();
    document.getElementById("video").play();
  };

  // Resize the video whenever the window size changes
  window.onresize = resizeVideo;

  // Listen for any click event on the page
  document.addEventListener("click", function(event) {
    // Play the video
    document.getElementById("video").play();
  });

  // Listen for any mouse movement on the page
  document.addEventListener("mousemove", function(event) {
    // Play the video
    document.getElementById("video").play();
  });
</script>