Safari 11 / YouTube API bug. Rapid play/pause and failure to autoplay

Question

This just started getting reported to me by users. I spent a bunch of time exploring my own code for bugs, but it seems like it's related specifically to Safari 11 (newest).

When using a simple example of the YouTube IFrame Embed API, Safari will rapidly switch between states of play and pause until it ends up on pause.

This is not the most optimized version of the example because there was some exploration in here as to what might make it work. I wanted to skip ahead and autoplay, but it wouldn't work the way it's supposed to. I tried using start and playVideo which are documented YT API examples.

I've only recently confirmed this to be a bug which explains why there's some verbose parameters in the example.

Notes:

• Sometimes the video WILL play depending on how many times you refresh, but it's very infrequent.
• Autoplay flags usually fail.
• Using start flag in this example to skip forward because startSeconds was not working.
• Code example works in other browsers: Chrome, Opera, Firefox

Here's an image of what you might see in Safari's console, which shows the Player State panic, eventually landing on 2 (paused).

Here's a copy/paste code sample that will replicate the bug. Drop it in any HTML file and you should see it fail in Safari 11.

<style>
    body, html, iframe {
        position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }
</style>


<script>
    var videoId = "9nwQ1F7oX-8";

    var playerVars = {
        autohide: 1,
        autopause: 0,
        autoplay: 1,
        cc_load_policy: "0",
        disablekb: 1,
        enablejsapi: 1,
        iv_load_policy: 1,
        modestbranding: 1,
        origin: "*",
        rel: 0,
        showinfo: 0,
        start: 122,
        version: 3
    };
</script>


<iframe id="ytplayer"
    frameborder="0"
    allowfullscreen="1"
    title="YouTube video player"
    width="100%"
    height="100%"
    x-src="https://www.youtube.com/embed/9nwQ1F7oX-8?enablejsapi=1&amp;origin=*&amp;rel=0&amp;version=3&amp;iv_load_policy=3&amp;modestbranding=1&amp;showinfo=0&amp;autohide=1&amp;disablekb=1&amp;autoplay=1&amp;autopause=0&amp;cc_load_policy=0&amp;startSeconds=30&amp;widgetid=1"
    src="https://www.youtube.com/embed/9nwQ1F7oX-8?enablejsapi=1&amp;origin=*&amp;start=122">
</iframe>


<script>
window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube is ready!", videoId, playerVars);

    var api = new YT.Player("ytplayer", {
        width: "100%",
        height: "100%",
        videoId: videoId,
        playerVars: playerVars,
        events: {

            onError: function(e) {
                // 100 – The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.
                // 101 – The owner of the requested video does not allow it to be played in embedded players.
                // 150 – This error is the same as 101. It"s just a 101 error in disguise!

                console.warn("An error has occurred", arguments);
            },

            onReady: function() {
                // log
                console.log("YouTube player is ready to use");

                //
                api.playVideo();
            },

            onStateChange: function(e) {
                // log
                console.log("YouTube state change ", e);

                // Finished
                if (e.data == 0) {
                    console.log("Finished");
                }

                // Playing
                else if (e.data === YT.PlayerState.PLAYING) {
                    console.log("Playing");
                }

                // Pausing
                else if (e.data === 2) {
                    console.log("Pausing");
                }

                // Buffering
                else if (e.data === 3) {
                    console.log("Buffering");
                }
            }
        }
    });

}
</script>

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

Answer 1

I have experienced many issues with the video players, especially getting autoplay working in different browsers and different devices.

It seems that the autoplay feature and the API play/pause are messing with eachother, resulting into the player state panic.

The final solution which worked best in my case:

Set autoplay to off , using 'autoplay: 0' in the playerVars. The 'api.playVideo();' your are using in your 'onReady: function()' should take it from there and will bring the player into ´play´ state.