Video won't play automatically on the landing-page

Can someone please help us with an autoplay of a video as a landingpage for the website.

We have a short 4 second video that we would like to play before you enter the actual website (its a logo video).

Now did we find a similar code here on the forum, however the video doesn't play for us. It stays as a still frame for some seconds? and then has an action to take the frame out of sight to show the website. We would also like for this action, the sliding to the left bit, to not be there. A simple fade out would be best. 

Could someone maybe tell us where in the code we go the wrong direction?

website: Burton Hamfelt

videolink (added into the squarespace files): https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4

Code used: 

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <video src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4"/>
</div>

<style>
  div#loader-container video {
    max-width:100%;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay: 3s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(500);
    }, 3000);
});
</script>

21 minutes ago, bhua_2022 said:

Can someone please help us with an autoplay of a video as a landingpage for the website.

We have a short 4 second video that we would like to play before you enter the actual website (its a logo video).

Now did we find a similar code here on the forum, however the video doesn't play for us. It stays as a still frame for some seconds? and then has an action to take the frame out of sight to show the website. We would also like for this action, the sliding to the left bit, to not be there. A simple fade out would be best. 

Could someone maybe tell us where in the code we go the wrong direction?

 

website: Burton Hamfelt

videolink (added into the squarespace files): https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4

 

Code used: 

<!-- Container for the splash screen with a specified ID -->
<div class="splash-wrapper" id="loader-container">
    <video src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4"/>
</div>

<style>
  div#loader-container video {
    max-width:100%;
}
  /* Loader animation styles */
  .splash-wrapper {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 9999;
    background-color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    animation-name: slideOut;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-delay: 3s;
    top: 0;
  }

  @keyframes slideOut {
    from {
      margin-left: 0vw;
    }
    to {
      margin-left: -100vw;
    }
  }
  @media screen and (max-width:767px) {
  div#loader-container {
    background-size: cover;
}
div#loader-container img {
    max-width: 300px;
}
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    setTimeout(function(){
        $('.splash-wrapper img').fadeIn(500);
    }, 3000);
});
</script>

To make video autoplay, make sure it is muted 

<video playsinline webkit-playsinline loop muted autoplay src="https://static1.squarespace.com/static/5845886620099e10cb851e10/t/66696e95624a89301ee59d03/1718185622431/01_BHUA+Landingspage+Collapsed+ending.mp4"></video>

@Beyondspace That did indeed do the trick!

However now it sticks to the top of the page, it does not go away once it finishes the 4sec video, any code I can add to this so it moves out of the frame?

Secondly, it seems extremely zoomed in, it does not listen to the 100% width coding

@karan That did it!

One more follow up question;

Any chance I can tweak the code so that it really only shows once, now it shows every time you get redirected to the project page, which is often!

Also are you seeing it being cut-off out of frame as well?

Here is the css code to solve cut off out of frame issue;
 

<style>
video#logovideo {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    background-color: #000;
}
</style>

Remove previous JavaScript code and add below new code. New code is for showing video logo for once;
 

 <script>
        document.addEventListener('DOMContentLoaded', function() {
            var video = document.getElementById('logovideo');
            var cookieName = 'videoWatched';

            // Function to set a cookie
            function setCookie(name, value, days) {
                var expires = "";
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    expires = "; expires=" + date.toUTCString();
                }
                document.cookie = name + "=" + (value || "") + expires + "; path=/";
            }

            // Function to get a cookie by name
            function getCookie(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }

            // Function to erase a cookie by name
            function eraseCookie(name) {
                document.cookie = name + '=; Max-Age=-99999999;';
            }

            // Check if the cookie exists
            if (getCookie(cookieName)) {
                video.style.display = 'none';
            } else {
                video.style.display = 'block';
            }

            // Event listener for video ended
            video.addEventListener('ended', function() {
                setCookie(cookieName, 'true', 1); // Set cookie to expire in 1 day
                video.style.display = 'none';
            });

            // Erase cookie on tab close
            window.addEventListener('beforeunload', function() {
                eraseCookie(cookieName);
            });
        });
    </script>

Thank you so much! It works!