0

When using the Youtube iframe API, onPlayerReady is never called, and the players are only partially loaded.

I have tried some things from other posts:

Here two solutions were proposed:

  • Setting the origin variable to match the server domain: I tried to set it both in the iframe src attribute in the HTML tag, and in playerVars when initializing the player. No changes seem to have happened.

  • Replacing <iframe> for <div> tags: This did work in other projects, but not here. Instead I get an error I never had before, when javascript tries to create the player:

    Uncaught TypeError: tubeId.indexOf is not a function
at returnFn (mytube.js:3115)
at Xg.c [as R] (www-embed-player.js:519)
at gh (www-embed-player.js:513)
at dh (www-embed-player.js:512)
at Xg.a.w (www-embed-player.js:509)
at $g (www-embed-player.js:510)
at Xg.h.da (www-embed-player.js:505)
at www-embed-player.js:533

The site has two players, and although I only replaced the tags in one of them, both players started throwing this error. Also, the player variables returned undefined now.

This post says the solution is setting enablejsapi to 1, but I already did so in the HTML iframe tag.

These errors are not happening in all computers. All of them were detected on a Windows 8 machine running Google Chrome (couldn't test on other browsers). The same happened in google Chrome on MacOS (although I couldn't test the last changes which triggered the mytube.js error there). In my computer (windows 7, tested the site on Chrome and Firefox) everything works mostly well, except for an occasional "Failed to execute 'postMessage' on 'DOMWindow'" error (it says the player origin is set to http://www.youtube.com, although I already replaced it). This error doesn't pop up always, but maybe 30% of the times.

This is how I create the players:

HTML:

<iframe id="video1" type="text/html" src="https://www.youtube.com/embed/?rel=0&enablejsapi=1&origin=https://mywebsite.com"></iframe>
<!-- Video ID is loaded on user interaction, using loadVideoById() -->

JS/jQuery:

$(document).ready(function() {
    loadYouTubeAPI();
});


function loadYouTubeAPI(){
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video1', {
        playerVars: {'origin':'https://mywebsite.com/'},
        events: {
            'onReady': onPlayerReady1
        },
    });
}

function onPlayerReady1(event) {    //I have different players that do different things when ready; I need different names for each onPlayerReady function
    (...)
}

Here are screenshots of how the console returns the player variables: left is how the players are being created now, right is how they should be. In the left image the player is missing all of the methods, so I cannot control it.

M. Cortés
  • 1

3 Answers3

0

Try setting ' enablejsapi="1" ' both in the url and as and attribute of the iframe like this: 

<iframe id="video1" type="text/html" src="https://www.youtube.com/embed/?rel=0&enablejsapi=1&origin=https://mywebsite.com" enablejsapi="1"></iframe>
jorgeRamirez
  • 31
  • 4
  • I updated it, but cannot test it right away. By the way, this is the website: https://miriamhecht.com.ar/#obra_01. That link should trigger the errors if they are present – M. Cortés Dec 31 '18 at 15:47
0

remove the origin:https://mywebsite.com/ from the URL and playerVars: {'origin':'https://mywebsite.com/'} block while developing. Keep in mind the following in production:

From the YouTube Player API Reference for iframe Embeds

As an extra security measure, you should also include the origin parameter to the URL, specifying the URL scheme (http:// or https://) and full domain of your host page as the parameter value. While origin is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.

1cgonza
  • 1,589
  • 10
  • 20
  • I added those when I uploaded the website to the server, as I couldn't make the players work at all without setting the origin in at least one of those places. Could this be causing problems? – M. Cortés Dec 31 '18 at 15:36
0

Update: I have found that the error linked to mytube.js and www-embed-player.js is due to code injected by a Chrome extension (SmartVideo for YouTube); I still have to figure out why, but somehow this extension prevents the players from loading correctly. Disabling it and replacing iframe tags by div tags seems to have solved the problem.

M. Cortés
  • 1