15

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?

2 Answers 2

32

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.

6
  • 5
    As a note if you're using the javascript load style, it's like playerVars: {'controls': 0, 'playsinline': 1 },
    – rogerdpack
    Oct 21, 2018 at 5:47
  • @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). Nov 29, 2019 at 16:57
  • 1
    long, rough day ... just the solution I was looking for, thank you! Nov 11, 2020 at 1:45
  • @JohnContarino the day i came across this this was also a long day. glad it could help!
    – David
    Nov 13, 2020 at 4:40
  • why i can't get this to work ? i'm using ionic mu url is something like this youtube.com/embed/idididdididi?playsinline=1
    – nab
    Dec 5, 2020 at 1:25
-1

As per the current API description, playsinline should be set to 0 to avoid fullscreen on iOS devices.

See below description, found on: https://developers.google.com/youtube/player_parameters

See below description, found on: https://developers.google.com/youtube/player_parameters

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.