I'm writing a webview component that displays a Youtube embed url as well as be able to control the video using methods (stop, start, pause, ..). I tried to follow the official instruction, use a local html file that take a video id as parameter, instead of passing a direct url. Things are fine except that I can not inject javascript to apply css to iframe children. According to my search, it's likely because of the nature of the iframe tag.
Using a direct url <Webview source={{uri: ...}} /> instead of html <Webview source={{html: ...}} /> solves the above problem, but it makes another one. In order to create controlling methods, I need to access the "player" instance. This is how I get "player" with html:
const buildIFrame = (videoId: string) => `<div id="player"></div><script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; // <=== The instance // This func will replace <div> above with <iframe> function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '100%', width: '100%, videoId: "${videoId}", playerVars: {}, events: {'onReady': onPlayerReady, } }); MessageInvoker.postMessage('YouTube has loaded'); } function onPlayerReady(event) { window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'playerReady', data: document.getElementById("player").innerHTML})) }</script> `;export const buildHTML = (videoId: string) => `<!DOCTYPE html><html><head> ${iFrameStyle}<meta name="viewport" content="initial-scale=1"><title>Navigation Delegate Example</title></head><body>${buildIFrame(videoId)}</body></html>`;// Controlling methodsconst pause = () => `player.pauseVideo();`const play = () => `player.playVideo();`const getDuration = () => `window.ReactNativeWebView.postMessage(JSON.stringify({eventType: 'getDuration', data: player.getDuration()}));`It looks like there is no way to do as above when using a url. I want to know is there a way that I can display a Youtube embed video without using iframe tag, as well as be able to create controlling methods for the video.
Thank you in advance!