Can't understand why this page load animation is glitching, background video issue

Design help Animations & Interactions
1

Hi everyone,

Made a quick site for an artist’s new album. It is pretty simple and I am testing the published version on my iPad in Safari and Chrome, and on my Pixel 3 XL in Chrome and am seeing the following problems occur:

  1. background video isn’t always playing on mobile (on the ‘info’ page it seems to always play, just not the home page) despite using this script to compel it to play

     <!-- START: Mobile Autoplay Video -->
 <script>
 var mobilevideo = document.getElementsByTagName("video")[0];
 mobilevideo.setAttribute("playsinline", "");
 mobilevideo.setAttribute("muted", "");
 </script>
 <!-- END: Mobile Autoplay Video -->

  2. The page load animation is clunky, clearly lagging or something, again on various browsers/devices.

i.e.

  • on desktop Chrome browser the “jónsi” header isn’t loading in (it is just appearing) and despite reconfiguring the animation several ways, and testing it in the Designer and having it work, it doesn’t work on the live site. The problem persists in private browser as well.

video: http://71.233.47.157:8080/share.cgi?ssid=0bEGWXj

  • iPad load animation is glitching. You can see how it’s clunky in the video.

video: http://71.233.47.157:8080/share.cgi?ssid=0TrVgNk

Thanks! Those are the two main issues I’m having. Other general feedback welcome!

Best,

Nick

Here is my public share link: Webflow - jónsi