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?