'Prevent Video Element from going Full Screen on iPhone

I have a ThreeJS project in which a video is being used as a texture on a 3D object. To get the video into a texture, I have a video element on the page that is hidden.

When testing my project on multiple devices and browsers I found a behaviour that only occurs on Safary on the iPhone (it doesn't occur in Safari on the iPad, or Chrome on the iPhone, or any other combination of systems/browser). The moment the video element starts playing Safari automatically presents the video full screen. I never wanted the video element to be visible at all.

Is there some way to mark the video element so that this behaviour does not occur?

Relevant parts of how I declared the video element follow.

<video id="primaryVideo" src="videos/clip00.mp4" class="hidden" loop  />


.hidden { 
    display:none;
}

Solution 1:^[1]

Found the answer. Adding the attribute playsinline to the video element takes care of this.

<video id="primaryVideo" playsinline src="videos/clip00.mp4" class="hidden" loop  />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joel

'Prevent Video Element from going Full Screen on iPhone

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]