javascript – HTML5 Video Going Fullscreen on iPhone’s Safari Despite ‘playsinline’ Attribute

I’m working on a website where I have an HTML5 video element that’s intended to play when users scrolls to certain position. However, on iPhone’s Safari browser, the video enters fullscreen mode when played, despite having the playsinline attribute set.

The full website is here: https://when-38028a.webflow.io

Here’s HTML

<div class="animationbox">
  <video class="animation spark1" width="480" height="360" loop muted playsinline >
    <!-- webm file here -->
    <source src="https://cdn.glitch.global/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_short_V2.webm?v=1692864791576" type="video/webm">
    
    <!-- mp4 file here -->
    <source src="https://cdn.glitch.global/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_short_V2_H.265.mp4?v=1692849080259" type="video/mp4;codecs=hvc1">
    </video>
  
  
  <video class="animation spark2" loop muted playsinline >
    <!-- webm file here -->
    <source src="https://cdn.glitch.global/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_Long_V2.webm?v=1692864761483" type="video/webm">
    
    <!-- mp4 file here -->
    <source src="https://cdn.glitch.global/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_Long_V2_H.265.mp4?v=1692849142346" type="video/mp4;codecs=hvc1">
  </video>
  
</div>

Here’s Javascript

sparks1.forEach( spark1 => {
  spark1.style.backgroundColor="transparent";

  if (box.position.y < vh*sh1) {
    spark1.loop = true;
    spark1.play();
  } else {
    spark1.loop = false;
  }
})
  

  
sparks2.forEach( spark2 => { 
   spark2.style.backgroundColor="transparent";

    if (box.position.y < vh*sh2) {
    spark2.loop = true;
    spark2.play();
  } else {
    spark2.loop = false;
  }
  })

Can anyone explain why this is happening? Any help or insights would be greatly appreciated!

I’ve tried adding webkit-playsinline but the issue still exist. I’d like to know if there’s anyway to disable videos automatically go to fullscreen.