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 Safari 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;
}
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 />