0

I am still a beginner when it comes to API and JavaScript. YouTube API is working fine on all the browser except on Internet Explorer 11. This is the js code I have added

var element = document.getElementById("btn-custom-wrap-before");
element.classList.add("hide");
var element = document.getElementById("btn-custom-wrap-after");
element.classList.add("show");

On IE, IE is reporting an error in JS on line 160, charachter 168. but there is no line 160 on my js file.

There is also no error on console.

<script>
document.addEventListener('DOMContentLoaded', function(){
    if (window.hideYTActivated) return;
    let onYouTubeIframeAPIReadyCallbacks=[];
    for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")){
    let playerFrame=playerWrap.querySelector("iframe");
    let tag=document.createElement('script');
    tag.src="https://www.youtube.com/iframe_api";
    let firstScriptTag=document.getElementsByTagName('script')[0];  
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    let onPlayerStateChange=function(event){
    if (event.data == YT.PlayerState.ENDED){
    playerWrap.classList.add("ended");
    var element = document.getElementById("btn-custom-wrap-before");
    element.classList.add("hide");
    var element = document.getElementById("btn-custom-wrap-after");
    element.classList.add("show");}
    else if (event.data==YT.PlayerState.PAUSED){
    playerWrap.classList.add("paused");}
    else if (event.data==YT.PlayerState.PLAYING){
    playerWrap.classList.remove("ended");
    playerWrap.classList.remove("paused");}};
    let player;
    onYouTubeIframeAPIReadyCallbacks.push(function(){
    player=new YT.Player(playerFrame,{
    events:{'onStateChange':     onPlayerStateChange}});});
    playerWrap.addEventListener("click", function(){
    let playerState=player.getPlayerState();
    if (playerState==YT.PlayerState.ENDED){player.seekTo(0);}
    else if (playerState==YT.PlayerState.PAUSED){player.playVideo();}});}
    window.onYouTubeIframeAPIReady=function(){
    for (let callback of onYouTubeIframeAPIReadyCallbacks){callback();}};
    window.hideYTActivated=true;});
</script>

When video ends it should have shown some text and buttons but it does not seem to work.

Are there any alternative route that I can take to make it work on IE 11?

Sam
  • 43
  • 7
  • 1
    https://caniuse.com/#search=classList which version of IE? – Taplar Jul 15 '19 at 15:24
  • I am using IE 11. – Sam Jul 15 '19 at 15:28
  • So, as you can see from the link, IE 11 does not support `classList.add` or `classList.remove` – Taplar Jul 15 '19 at 15:29
  • 1
    Version of I.E.? Does Internet Explorer need to be tested? (Microsoft won't even call it a 'web browser' any longer, it's a "compatibility solution" for creaking corporate intranets and old web-apps, and any individual still using it should upgrade) Fair enough if you do need it to work on I.E., if you do not however, I'd just test in Microsoft Edge, and if it works in there, and you have minimal / no users on I.E., just move on. I know it's not an answer, but organisations I have worked for have decided to ignore I.E. and any customer seeking support is told to select a worthy alternative. – Rack Sinchez Jul 15 '19 at 15:30
  • The question is tagged with `jQuery`, but it's not using it. In any case, you can use `$('#btn-custom-wrap-before').addClass('hide')` to add a class with jquery. – Taplar Jul 15 '19 at 15:32
  • I am using JS YT-API code for each page as each page has different video. – Sam Jul 15 '19 at 15:36

0 Answers0