iPhone plays embedded video fullscreen

Question

i created a small website that includes a video with this code:

    <video autoplay="autoplay">
        <source src="inc/WEB_MASTER.mp4" type="video/mp4">
        <source src="inc/WEB_MASTER_ios.m4v" type="video/mp4">
        Your browser does not support the video tag.
    </video>

When i load the page via my iPhone the video starts playing, but it does not play it in the part of the website, instead the iphone plays the video in fullscreen. How can i force the iphone to play the video in the respective area on the website?

Thanks.

I think that isn't possible on iPhone/iPod, just on iPads – jcesarmobile Mar 17 '13 at 10:45 — jcesarmobile, Mar 17 '13 at 10:45

score 1 · Answer 1 · answered Apr 01 '16 at 05:48

The iPhone and iPod seem just about the only devices/browsers that force fullscreen video playback in Safari (and in apps that make use of its unmodified WebView)

You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.

I wrote a module that takes care of playing the video inline and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video

score -2 · Answer 2 · edited May 23 '17 at 11:54

-2

This question is answered here: HTML5 inline video on iPhone vs iPad/Browser

Just add the webkit-playsinline attribute to the video tag. Works in iOS 4.0 and later:

<video id="player" width="120" height="60" webkit-playsinline>

Here is the official documentation for webkit-playsinline.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 17 '13 at 10:55

mspasov

451
6
19

2

This only works inside a UIWebView in a native iOS app, it doesn't work inside iOS Safari. – Soviut Dec 03 '13 at 21:56

iPhone plays embedded video fullscreen

2 Answers2

Linked