I am using Youtube API for loading youtube videos in webview for Android. Everything is working fine but the click event for full screen is not triggered.
Below is my code:
private fun getHTMLData(videoId: String): String {
return """
<!DOCTYPE html>
<html>
<body style="margin:0px;padding:0px;">
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
console.error("-------playing-------");
player = new YT.Player('player', {
width: '100%',
videoId: '$videoId',
playerVars: {
'playsinline': 1,
'allowfullscreen': 1 // Enable fullscreen mode
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
// Call updateHeight function on initial load
updateHeight();
}
function onPlayerReady(event) {
console.error("-------onPlayerReady-------");
event.target.playVideo();
// Attach click event listener to the full-screen button
var fullScreenButton = document.querySelector(".ytp-fullscreen-button");
if(fullScreenButton){
fullScreenButton.addEventListener('click', function() {
toggleFullScreen();
});
}else{
console.error("-------Fullscreen button not found-------");
}
}
function onPlayerStateChange(event) {
// Handle player state changes here if needed
}
function toggleFullScreen() {
console.error("Toggling fullscreen");
if (player.isFullscreen()) {
player.exitFullscreen();
} else {
player.playVideo(); // Autoplay is required for full-screen on mobile devices
player.getIframe().requestFullscreen();
}
}
function updateHeight() {
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
document.getElementById('player').style.height = (screenHeight) + 'px';
}
</script>
</body>
</html>
""".trimIndent()
}
I am loading this in webview as :
webView.apply {
settings.javaScriptEnabled = true
settings.loadWithOverviewMode = true
}
webView.webChromeClient = object : WebChromeClient() {
override fun onConsoleMessage(consoleMessage: ConsoleMessage): Boolean {
Log.e("WebView------------->>>", consoleMessage.message())
return true
}
}
val htmlData =
getHTMLData(id)
webView.loadData(htmlData, "text/html", "utf-8");
I am getting error log that is inside the else block console.error("-------Fullscreen button not found-------");
Am i missing something?