youtube.com/iframe_api do not fire in IE11 or Edge in Windows 10

Question

I have implemented iframe_api for youtube clips on my site with following code.

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

// Setup Youtube player
var player;

// Get id of first clip
var ytVideoId = jQuery('.start-yt').attr('data-video-id');

// When API is ready, create player with above id
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: ytVideoId,
        events: {
            'onReady': onPlayerReady
        }
    });
    console.log('API Ready');
}

// When player is ready
function onPlayerReady(event) {
    jQuery('.start-yt').addClass('play-icon');

    // Set glob var
    var ytGlobId ="";

    // Close button
    jQuery('.ytClose').click(function(){
        jQuery('.youtube-player-container').removeClass('active');
        player.pauseVideo();
    });

    jQuery('.youtube-player-container').click(function(){
        jQuery('.youtube-player-container').removeClass('active');
        player.pauseVideo();
    });

    // load or play clip
    jQuery('.start-yt').click(function(){
        jQuery('.youtube-player-container').addClass('active');

        if (ytGlobId == jQuery(this).attr('data-video-id')) {
            player.playVideo();
        } else {
            ytGlobId = jQuery(this).attr('data-video-id');
            player.loadVideoById(ytGlobId);
        }
    });

    console.log('Player Ready');
}

This works. But a friend have Windows 10 and IE11 + Edge. And it seems that 'onReady': onPlayerReady do not fire there. console.log do write API Ready but not Player Ready when we have checked. It gives no error in the console, it just do not fire and works. I have checked in Browserstack with the same combinations (Windows 10 + IE11/Edge) and there it seems to work.

I have searched google for answers, and it seems some people have had similar problems, but I have not found an example exact enough to find a solution.

score 0 · Answer 1 · edited May 23 '17 at 12:18

0

As stated in this thread, there is a temporary issue with the IFrame API. There was a temporary issue with the iFrame Player API (which was fixed in June 2013) that you can read in this link.

As a temporary fix, you just need to add the event listener within the onReady event:

function onReady() {
    player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });
}

Here's another thread which might also help: Youtube Iframe API not working in Internet Explorer (11)

edited May 23 '17 at 12:18

Community

1
1

answered May 18 '17 at 16:06

abielita

13,147
2
17
59

Thanks @abielita. Tried it out, but it did not work. – JoakimB May 22 '17 at 06:48
All I should need to do is to att that eventlistner with just a console.log message? After I did that I get error in Chrome `Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://dev3.axiell.com').`, but the player is working. But still no difference in Edge/IE11, it still fails. I also tried to place my functionality within the eventlistner, but that crashed the player in all browsers. – JoakimB May 22 '17 at 06:58
sorry for many splitted comments about the same thing. As I see it, the problem is that function `onReady()` never even gets called at all. So placing eventlistner within it makes no difference since `onReady()` never fires at all in Win10 + Edge/IE11. – JoakimB May 22 '17 at 09:12

youtube.com/iframe_api do not fire in IE11 or Edge in Windows 10

1 Answers1