iOS Development

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

Spread the love


I am engaged on a web site the place I’ve an HTML5 video ingredient that is meant to play when customers scrolls to sure place. Nevertheless, on iPhone’s Safari browser, the video enters fullscreen mode when performed, regardless of having the playsinline attribute set.

The complete web site is right here: https://when-38028a.webflow.io

Here is HTML

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

Here is Javascript

sparks1.forEach( spark1 => {
  spark1.model.backgroundColor="clear";

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

  
sparks2.forEach( spark2 => { 
   spark2.model.backgroundColor="clear";

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

Can anybody clarify why that is taking place? Any assist or insights can be vastly appreciated!

I’ve tried including webkit-playsinline however the difficulty nonetheless exist. I might wish to know if there’s anyway to disable movies mechanically go to fullscreen.

Leave a Reply

Your email address will not be published. Required fields are marked *