Fullscreen button in embedded Youtube-player disabled on iPad

问题

After plowing through at least ten similar questions on stackoverflow, it seems I have stumbled upon something new:

Recently (not sure exactly when this stopped working) the fullscreen button on embedded youtube videos are disabled on iPads, with the note "your browser doesn't support full screen" popping up if I try to click it.

This old jsfiddle show the problem clearly: http://jsfiddle.net/zub16fgt/

Js-fiddle html goes here:

<script src="https://www.youtube.com/iframe_api"></script>
<div id="player"></div>

The javascript:

var onPlayerReady = function(event) {
      event.target.playVideo();  
};

// The first argument of YT.Player is an HTML element ID. YouTube API will replace my <div id="player"> tag with an iframe containing the youtube video.
var player = new YT.Player('player', {
    height: 320,
    width: 400,
    videoId : '6Dc1C77nra4',
    events : {
        'onReady' : onPlayerReady
    }
 });

I have tried with the following pure html-tag too, with no change:

http://jsfiddle.net/zub16fgt/501/

<iframe id="walkthrough-0" width="100%" height="315" src="https://www.youtube.com/embed/6Dc1C77nra4" frameborder="0" allowfullscreen=""></iframe>

After testing with a few million settings, I give up:

How can I make the player enable the fullscreen-button?

NOTE/ANSWER: I decided to disable the fullscreen-button all together instead and created a covering the entire window instead, with the video inside.

This looks alright and gave me the opportunity to style the fullscreen window more to my taste instead of relying on youtube's (unstable) fullscreen.

来源：https://stackoverflow.com/questions/49650040/fullscreen-button-in-embedded-youtube-player-disabled-on-ipad

标签

javascript

html

ipad

youtube