I am engaged on an internet site the place I’ve an HTML5 video factor that is supposed 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.world/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_short_V2.webm?v=1692864791576" kind="video/webm">
<!-- mp4 file right here -->
<supply src="https://cdn.glitch.world/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_short_V2_H.265.mp4?v=1692849080259" kind="video/mp4;codecs=hvc1">
</video>
<video class="animation spark2" loop muted playsinline >
<!-- webm file right here -->
<supply src="https://cdn.glitch.world/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_Long_V2.webm?v=1692864761483" kind="video/webm">
<!-- mp4 file right here -->
<supply src="https://cdn.glitch.world/f90b0e3d-330b-4251-87da-f2c2c0235b47/Sparks_Long_V2_H.265.mp4?v=1692849142346" kind="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 occurring? Any assist or insights can be enormously appreciated!
I’ve tried including webkit-playsinline however the concern nonetheless exist. I might prefer to know if there’s anyway to disable movies mechanically go to fullscreen.