Plyr: iOS iFrame = no fullscreen option in v3

Created on 18 Mar 2018 · 10Comments · Source: sampotts/plyr

Expected behaviour

The player should offer the same functionalities like fullscreen option also when embedded via iFrame.

Actual behaviour

On iOS 11/ Safari the fullscreen option is automatically removed from player once Plyr gets loaded inside an iFrame.

Environment

Browser: Safari
Version: latest
Operating System: iOS
Version: 11.2.6

Steps to reproduce

Plyr without iFrame: http://alpine-dash-hls.gq/player/plyr.html
Same Plyr loaded via iFrame: http://alpine-dash-hls.gq/demos/plyr

Improvement

Source

majamee

All 10 comments

It's do-able but you need to ensure that you add the allowfullscreen attribute to the iframe. Will look at this. For iOS though you'd need to also force the native fullscreen rather than use the "full window" which means you'd lose the custom controls. It's all a bit of a trade off.

sampotts on 18 Mar 2018

I did all of the above already, that is my issue :)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Using latest stable version 3.x -->
  <link rel="stylesheet" href="https://unpkg.com/plyr@3/dist/plyr.css">

  <title>Auto-DASH-HLS Plyr Player</title>
</head>

<body>
  <main role="main" id="main">
    <video id="player" controls>
      <source src="playlist.m3u8" type="application/x-mpegURL">
    </video>
  </main>

  <!-- Include plyr.js and dash.js in your page -->
  <!-- Using latest stable version 3.x -->
  <script src="https://unpkg.com/plyr@3/dist/plyr.js"></script>
  <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
  <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
  <script src="https://unpkg.com/rangetouch/src/js/rangetouch.js" async></script>
  <!-- Polyfills -->
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>

  <script>
    video = document.querySelector('#player');
    if ( typeof ( window.MediaSource || window.WebKitMediaSource ) === "function" ) {
      (function () {
        var mpd = "playlist.mpd",
            dash = dashjs.MediaPlayer().create();

        dash.initialize(video, mpd, false);
      })();
    }
    const player = new Plyr('#player', {
      /* options */
      "fullscreen": { enabled: true, fallback: true, iosNative: true }
    });
  </script>

</body>

</html>

<iframe src="../../player/plyr.html" type="text/html" frameborder="0" allowfullscreen width="100%" height="1080"><p>Failed to load Plyr Player! I'm sorry :(</p></iframe>

majamee on 18 Mar 2018

Yeah I said "it's do-able" implying it doesn't support it now but it could be done with the trade offs I outlined.

sampotts on 18 Mar 2018

👍1

I would love to see it working again. If I remember correctly it was working like that already in version 2.x if I'm not mistaken. :)

majamee on 18 Mar 2018

You're probably right but there were loads of changes in v3 which included supporting playsinline which enabled custom controls on iOS. I'll look at fixing it soon.

sampotts on 18 Mar 2018

❤1

I've also noticed that playsinline is not getting added on iPad. Is there a particular reason why? Could that be switched to isIos safely?

thexeos on 25 Mar 2018

Well not everyone wants playsinline. So you can add the attribute?

On 25 Mar 2018, at 11:44 am, thexeos notifications@github.com wrote:

I've also noticed that playsinline is not getting added on iPad. Is there a particular reason why? Could that be switched to isIos safely?

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub, or mute the thread.

sampotts on 25 Mar 2018

Well not everyone wants playsinline. So you can add the attribute?

I Googled around and it seems like iPads have playsinline enabled by default. I did not realize that. If that was not the case, then Plyr would always show the Plyr UI, even when playsinline was not set on <video> element, since iPads are excluded from isIPhone. In other words, it's all good.

thexeos on 26 Mar 2018

This should be resolved in v3.0.5

sampotts on 27 Mar 2018

👍1

@sampotts Thank you very much, just tested and can confirm that it is working fine now :)
By the way, if you do not mind to much I would be very happy to hear your thoughts about my little project which utilizes also your great player. http://alpine-dash-hls.gq

majamee on 30 Mar 2018

Was this page helpful?

0 / 5 - 0 ratings