I have web page and custom JS player based on IFrame Youtube API. And this player works everywhere except of WebView on Android.For debugging I connected Android Smartphone to laptop and checked console in Chrome on this page: chrome://inspect/#devices.
In console I see these errors:
Uncaught TypeError: s.playVideo is not a functionat HTMLDivElement. (player.js:1:3594)
Uncaught ReferenceError: _yt_player is not definedat embed.js:292:104
Uncaught ReferenceError: await is not definedat :1:13
Uncaught TypeError: p.playVideo is not a functionat HTMLButtonElement.
Looks like API doesn't init.My script player.js connected to the page as file. Also tried to connect iframe api as file before my file but situation is the same.
What can be wrong? Part of my player.js file below:
document.addEventListener('DOMContentLoaded', function() { var players = []; var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // This function is called when the YouTube IFrame API is ready function onYouTubeIframeAPIReady() { document.querySelectorAll('.player__container').forEach((container, index) => { var videoId = container.dataset.id; var playerElement = container.querySelector('.player'); var coverElement = container.querySelector('.player__cover'); // Set cover image from YouTube thumbnail coverElement.style.backgroundImage = `url(https://img.youtube.com/vi/${videoId}/maxresdefault.jpg)`; // Initialize the YouTube player var player = new YT.Player(playerElement, { width: "590", height: "640", videoId: videoId, playerVars: { controls: 0, disablekb: 0, modestbranding: 1, rel: 0, autohide: 1, showinfo: 0, playsinline: 1 }, events: {'onReady': (event) => { onPlayerReady(event, container, player, videoId); },'onStateChange': onPlayerStateChange } }); // Store the player instance players.push(player); }); } // This function is called when the player is ready function onPlayerReady(event, container, player, videoId) { // Setup controls and cover only after player is ready setupControls(container, player); setupCover(container.querySelector('.player__cover'), player); } // Handle player state changes (currently empty) function onPlayerStateChange(event) { } // Setup controls for play, pause, stop, volume, etc. function setupControls(container, player) { var playButton = container.querySelector('.player__play'); var coverElement = container.querySelector('.player__cover'); // Another controls... // Play button event playButton.addEventListener('click', () => { player.playVideo(); coverElement.classList.add('hidden'); }); // Another button events... } // Setup cover click event to play video function setupCover(coverElement, player) { coverElement.addEventListener('click', () => { coverElement.classList.add('hidden'); player.playVideo(); }); } // Assign the onYouTubeIframeAPIReady function to the global window object window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;});