I have 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 function
at HTMLDivElement. (player.js:1:3594)Uncaught ReferenceError: _yt_player is not defined
at embed.js:292:104Uncaught ReferenceError: await is not defined
at :1:13Uncaught TypeError: p.playVideo is not a function
at 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;
});