Iframe api state change does not trigger with mdl js

Question

The iframe api onStateChange does not get triggered when mdl js is present.

See codepen . This will not console log state changes , deleting

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

will console log the changes.

Answer 1

Based from this link, there was a temporary issue with the iFrame Player API and 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);
    });
}

Make sure to remove the onStateChange event from the YT.PLAYER constructor (see the jsfiddle).