I have a web application which uses YouTube Iframe API to sync lyrics and chords with YouTube songs. It is essential for us that the embedded video plays inline without fullscreen. Otherwise users can not see the lyrics and the chords on the page and the app would be meaningless.

Here is the demo.

We have get 50% of our traffic from iphones, however iphones play youtube videos always fullscreen.

Here is the code to embed the video

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: $("#ytid").attr("value"),
    playerVars: {'theme':'light','color':'white','modestbranding':1,'rel':0},
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

Looking for a solution on the web, we have tried some fixes but none of them work on iphone. We are also ready to develop a Swift application if we believe it would work. However web search also suggests the opposite.

1. Is there a solid workaround to play YouTube Iframe API videos inline?
2. Can we solve our problem by developing a native IOS application?

I have a web application which uses YouTube Iframe API to sync lyrics and chords with YouTube songs. It is essential for us that the embedded video plays inline without fullscreen. Otherwise users can not see the lyrics and the chords on the page and the app would be meaningless.

Here is the demo.

We have get 50% of our traffic from iphones, however iphones play youtube videos always fullscreen.

Here is the code to embed the video

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: $("#ytid").attr("value"),
    playerVars: {'theme':'light','color':'white','modestbranding':1,'rel':0},
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

Looking for a solution on the web, we have tried some fixes but none of them work on iphone. We are also ready to develop a Swift application if we believe it would work. However web search also suggests the opposite.

1. Is there a solid workaround to play YouTube Iframe API videos inline?
2. Can we solve our problem by developing a native IOS application?

• javascript
• ios
• iphone
• youtube-iframe-api

Share Improve this question Follow asked Mar 16, 2016 at 18:14 GirayGiray 10511 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Adding the parameter 'playsinline':'1' to the playerVars worked for me. I don't know whether this is true for web as well, I am working from a WebView in a React Native app.

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: $("#ytid").attr("value"),
    playerVars: {'playsinline':'1', 'theme':'light','color':'white','modestbranding':1,'rel':0},
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }
});

Broadly speaking: No, Safari on the iPhone will always play videos fullscreen

The iPad does support inline video playback.

If you had your own iOS application, obviously you could have more control over the video playback. Looking at your website, having an app would certainly allow you to have better control over the autoscrolling etc as it does open up a whole world of abilities (and plexity!).