YouTube Player API onReady not firing for www.youtube-nocookie.com

Question

I'm having trouble with the YouTube Player API Reference for iframe Embeds...

Specifically with using http://www.youtube-nocookie.com
(necessary for iOS to allow embeds to play in Safari)

the onPlayerReady function in the demo is not called for for http://www.youtube-nocookie.com (works fine for http://www.youtube.com)

See steps to reproduce below

Step 1: Use the standard api demo: (copy the code found at the link below) https://developers.google.com/youtube/iframe_api_reference#Getting_Started

---> works fine

- Step 2: as instructed in https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

change

<div id="player"></div>

to (in the demo from Step 1)

<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>

(make sure to change origin=http://example.com to your domain)

---> works fine

- Step 3: in the iframe tag added in the last step, change

src="http://www.youtube.com/embed/...

to

src="http://www.youtube-nocookie.com/embed/...

---> now the onPlayerReady function is never called

Note: as far as I can tell, this used to work until a few weeks ago...

Where are you seeing the piece in the documentation provided for the 'nocookie' url? AFAIK there's no restriction on youtube embeds in safari or chrome for ios. Can you provide the specific iframe embed you are using? My first thought is it might be a protocol mismatch. — twill, Apr 07 '16 at 15:17
No restriction in iOS, but without youtube-nocookie in the url, the video currently won't play in the browser, but instead opens the youtube app and plays there instead. Search for "nocookie" in the following pages: http://stackoverflow.com/questions/29794859/embedded-youtube-videos-in-html5-standalone-app-ios-8-3-opening-youtube-app http://stackoverflow.com/questions/30263003/how-to-prevent-a-youtube-iframe-to-redirect-from-standalone-app-to-youtube-app http://stackoverflow.com/questions/25972600/ios-8-embedded-youtube-in-html-web-app-fails — vitabot1, Apr 07 '16 at 16:44
What happens if you replace your iframe code with the following: — twill, Apr 07 '16 at 17:29
No change... The video is displayed, and if you click play, it plays. The problem is that the api is not activating. (the onPlayerReady function is never called) — vitabot1, Apr 07 '16 at 19:12

score 3 · Answer 1 · edited Mar 09 '19 at 03:35

window.onYouTubeIframeAPIReady = function() {
  player = new YT.Player(document.getElementById('player'), {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    host: 'https://www.youtube-nocookie.com',
    events: {
      'onReady': function() {
        console.log('ready');
      },
      'onStateChange': function() {
        console.log('state change', arguments)
      }
    }
  });
}

$.getScript("https://www.youtube.com/iframe_api");

score 2 · Answer 2 · answered Apr 20 '16 at 20:34

2

I can fully confirm this issue. I've been using youtube-nocookie.com for more than a year and suddenly few weeks ago it stopped working. Normal youtube.com embeds work just fine.

It seems that this isn't just your problem, I guess it's problem on Google's side.

answered Apr 20 '16 at 20:34

Michal Oberreiter

31
1

thanks for the confirmation. I've also reported the issue to google, but no response yet. – vitabot1 Jun 07 '16 at 18:18
Same issue for me. I see that this issue was supposedly fixed in 2012, but now in 2018 the issue is back again! UGH https://groups.google.com/forum/#!topic/youtube-api-gdata/lscdyDrV0T0 – Nigel Belham Apr 05 '18 at 18:45
Just tried and it seems like it's working as expected. – Joël Jun 04 '20 at 09:26

score 0 · Answer 3 · answered Jun 11 '18 at 12:38

It seems like that the API works fine with youtube-noocookie.com. The following code works in JsFiddle, but does not work in StackOverflow editor.

window.onYouTubeIframeAPIReady = function() {
  player = new YT.Player(document.getElementById('player'), {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    host: 'https://www.youtube-nocookie.com',
    events: {
      'onReady': function() {
        console.log('ready');
      },
      'onStateChange': function() {
        console.log('state change', arguments)
      }
    }
  });
}

$.getScript("https://www.youtube.com/iframe_api");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="player">

</div>

YouTube Player API onReady not firing for www.youtube-nocookie.com

3 Answers3