CODEWITHSUNDEEP
iosvideosafarimobile-safari
Joel
Joel

Reputation: 2361

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

Upvotes: 6

Views: 3579

Answers (1)

Joel
Joel

Reputation: 2361

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  />

Upvotes: 9

Related Questions