CODEWITHSUNDEEP
javascriptiosiphoneyoutube-iframe-api
Giray
Giray

Reputation: 105

YouTube Iframe API on Iphone without fullscreen

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?

Upvotes: 2

Views: 3712

Answers (2)

Hendrik
Hendrik

Reputation: 1525

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

Upvotes: 9

Gavin Bunney
Gavin Bunney

Reputation: 1240

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 complexity!).

Upvotes: 0

Related Questions