Disable auto fullscreen of YouTube embeds on iPhone

Question

As we will know from other questions on the site to in iOS Mobile Safari we have these tasty attributes webkit-playesinline and the more concise playsinline to disable auto fullscreen of videos.

Despite that miracle I'm still unable to figure out how to add this to YouTube html5 embeds. As expected the YouTube <video> is contained within an <iframe>.

the ideal result is something as the following:

<video 
    tabindex="-1" 
    class="video-stream html5-main-video" 
    style="width: 736px; height: 414px; left: 85px; top: 0px;" 
    src="blob:https://www.youtube.com/6889sdad6d2-ec51-49ca-b357-a5bd9c3ede71" 
    webkit-playsinline="true" 
    playsinline="true">
</video>

I have tried, in vain, to do this via jquery.

Any thoughts or ideas how to do this?

Solution

Add playsinline=1 paramerer to the embed url. Add ? or & before as appropriate; ? if the only paramerter, & to concatenate with other params.

Example:

<iframe
  src="https://www.youtube.com/v/VIDEO_ID?playsinline=1">
</iframe>

From YouTube iFrame Player API:

This parameter controls whether videos play inline or fullscreen in an HTML5 player on iOS. Valid values are: 0: This value causes fullscreen playback. This is currently the default value, though the default is subject to change. 1: This value causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE.

Comments

[rogerdpack]

As a note if you're using the javascript load style, it's like playerVars: {'controls': 0, 'playsinline': 1 },

[catamphetamine]

@rogerdpack For the record, were you able to autoplay youtube-player-API-inserted videos in a browser in iOS? Mine aren't consistent: sometimes they do, sometimes they don't (React).

[John Contarino]

long, rough day ... just the solution I was looking for, thank you!

[David]

@JohnContarino the day i came across this this was also a long day. glad it could help!

[ChiKa LiO]

why i can't get this to work ? i'm using ionic mu url is something like this youtube.com/embed/idididdididi?playsinline=1

[David]

not sure about the interaction when you are using an ionic app~ you may need to use a native library. I also seem to remeber some issues if /embed/ is in the url