I have an issue with YouTube Palyer API , the player is integrated correctly into the page and when you visit the page it loads correctly, however if for example the user navigate away from the page eg: via some hyperling and then use the browser back to return to the previous where the video was first loaded , the player has a black screen and no video is loaded. Is is usually the case for firefox and safari browser. What I can see is , the https://www.youtube-nocookie.com is not even downloaded and the cookies aren't set.I have tired by calling my activateYouTube function like this
// 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.setAttribute('data-ot-ignore','') tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); window.players = []; function youTubePlayer(video, id) { return new window.YT.Player(video, { height: video.clientHeight, host: 'https://www.youtube-nocookie.com', width: video.clientWidth, videoId: id, playerVars: { autoplay: 0, color: 'white' } }); } function activateYouTube() { if (window.YT) { const teaserCols = document.getElementsByClassName('youtube-teaser'); for (var i = 0; i < teaserCols.length; i++) { if (teaserCols[i].offsetParent.offsetParent.classList[2] == 'col-xl-3') { teaserCols[i].style.minHeight = '148px'; } } var videosCarousel = [] videosCarousel = document.querySelectorAll('.animateMotion-video'); var videosSingleYoutube = []; videosSingleYoutube = document.querySelectorAll('.video-item.youtube-teaser'); var videos = []; videos = videos.concat(Array.from(videosCarousel), Array.from(videosSingleYoutube)); for (var i = 0; i < videos.length; i++) { var player = youTubePlayer(videos[i], videos[i].dataset.id || videos[i].dataset.embed); window.players.push(player); } } } window.onYouTubeIframeAPIReady = function (e) { window.onpageshow = function () { activateYouTube(); }); window.addEventListener('load', function () { activateYouTube(); }); };</script>Still it does not load anymore and it just shows a black screen as shown in the image attachedI have also tried to reload the page using this
window.addEventListener('pageshow',function (event) { if (event.persisted) { window.location.reload(); } }); window.addEventListener('load', function () { activateYouTube(); }); }; ````but still not success[![enter image description here][1]][1] [1]: https://i.stack.imgur.com/JGv7q.png