Custom CSS file video won't autoplay on code block

Site URL: https://joeylim.xyz/art-dubai

Hello! 

After using .gifs as my primary way to show multiple images on an image block, I found there to be some banding issues on higher quality/larger .gifs. So I tried a new way of uploading a .mp4 to the custom css files, and using a code block to load the video instead of a .gif.

On the editing side, it seems to be working perfectly, no lag, autoplay on, and continuously looping. However when I try to load it on a separate browser(safari/chrome), the video doesn't work consistently. Even when it does, you have to manually press play to start the video. 

Here is the html code I used for the block: 

<centre>
  
  <video autoplay="autoplay" loop="true" width="100%">
    <source src="video link.mp4" 
      type="video/mp4"/>
  </video>
</centre>

Can anyone see what is the problem here? I've attached a video showing how it's supposed to work. 

Thanks! 

Joey 

Try this new code

<centre>
  <video autoplay loop width="100%">
    <source src="video link.mp4" 
      type="video/mp4"/>
  </video>
</centre>

2 hours ago, tuanphan said:

Try this new code

<centre>
  <video autoplay loop width="100%">
    <source src="video link.mp4" 
      type="video/mp4"/>
  </video>
</centre>

 

It doesn't seem to be working, same issue across both safari/chrome and on mobile/desktop