majirosstefan/react-native-youtube-iframe.html

## react-native-youtube-iframe.html
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width," />
    <style>
      body {
        margin: 0;
      }
      .container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
      }
      .video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="video" id="player"></div>
    </div>

    <script>
      const randomPlayerId = 'player' + Date.now();
      document.getElementById('player').id = randomPlayerId;

      const parsedUrl = new URL(window.location.href);
      const UrlQueryData = parsedUrl.searchParams.get('data');
      const {
        end,
        list,
        color,
        start,
        rel_s,
        loop_s,
        listType,
        playerLang,
        playlist,
        videoId_s,
        controls_s,
        cc_lang_pref_s,
        contentScale_s,
        allowWebViewZoom,
        modestbranding_s,
        iv_load_policy,
        preventFullScreen_s,
        showClosedCaptions_s,
      } = JSON.parse(UrlQueryData);

      function sendMessageToRN(msg) {
        window.ReactNativeWebView.postMessage(JSON.stringify(msg));
      }

      let metaString = '';
      if (contentScale_s) {
        metaString += `initial-scale=${contentScale_s}, `;
      }

      if (!allowWebViewZoom) {
        metaString += `maximum-scale=${contentScale_s}`;
      }

      const viewport = document.querySelector('meta[name=viewport]');
      viewport.setAttribute('content', 'width=device-width, ' + metaString);

      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;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player(randomPlayerId, {
          width: '1000',
          height: '1000',
          videoId: videoId_s,
          playerVars: {
            end: end,
            rel: rel_s,
            list: list,
            color: color,
            loop: loop_s,
            start: start,
            playsinline: 1,
            hl: playerLang,
            playlist: playlist,
            listType: listType,
            controls: controls_s,
            fs: preventFullScreen_s,
            cc_lang_pref: cc_lang_pref_s,
            iv_load_policy: iv_load_policy,
            modestbranding: modestbranding_s,
            cc_load_policy: showClosedCaptions_s,
          },
          events: {
            onReady: onPlayerReady,
            onError: onPlayerError,
            onStateChange: onPlayerStateChange,
            onPlaybackRateChange: onPlaybackRateChange,
            onPlaybackQualityChange: onPlaybackQualityChange,
          },
        });
      }

      function onPlayerError(event) {
        sendMessageToRN({eventType: 'playerError', data: event.data});
      }

      function onPlaybackRateChange(event) {
        sendMessageToRN({eventType: 'playbackRateChange', data: event.data});
      }

      function onPlaybackQualityChange(event) {
        sendMessageToRN({eventType: 'playerQualityChange', data: event.data});
      }

      function onPlayerReady(event) {
        sendMessageToRN({eventType: 'playerReady'});
      }

      function onPlayerStateChange(event) {
        sendMessageToRN({eventType: 'playerStateChange', data: event.data});
      }

      var isFullScreen = false;
      function onFullScreenChange() {
        isFullScreen =
          document.fullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement;

        sendMessageToRN({
          eventType: 'fullScreenChange',
          data: Boolean(isFullScreen),
        });
      }

      document.addEventListener('fullscreenchange', onFullScreenChange);
      document.addEventListener('msfullscreenchange', onFullScreenChange);
      document.addEventListener('mozfullscreenchange', onFullScreenChange);
      document.addEventListener('webkitfullscreenchange', onFullScreenChange);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width," />
	<style>
	body {
	margin: 0;
	}
	.container {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	}
	.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="video" id="player"></div>
	</div>

	<script>
	const randomPlayerId = 'player' + Date.now();
	document.getElementById('player').id = randomPlayerId;

	const parsedUrl = new URL(window.location.href);
	const UrlQueryData = parsedUrl.searchParams.get('data');
	const {
	end,
	list,
	color,
	start,
	rel_s,
	loop_s,
	listType,
	playerLang,
	playlist,
	videoId_s,
	controls_s,
	cc_lang_pref_s,
	contentScale_s,
	allowWebViewZoom,
	modestbranding_s,
	iv_load_policy,
	preventFullScreen_s,
	showClosedCaptions_s,
	} = JSON.parse(UrlQueryData);

	function sendMessageToRN(msg) {
	window.ReactNativeWebView.postMessage(JSON.stringify(msg));
	}

	let metaString = '';
	if (contentScale_s) {
	metaString += `initial-scale=${contentScale_s}, `;
	}

	if (!allowWebViewZoom) {
	metaString += `maximum-scale=${contentScale_s}`;
	}

	const viewport = document.querySelector('meta[name=viewport]');
	viewport.setAttribute('content', 'width=device-width, ' + metaString);

	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;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player(randomPlayerId, {
	width: '1000',
	height: '1000',
	videoId: videoId_s,
	playerVars: {
	end: end,
	rel: rel_s,
	list: list,
	color: color,
	loop: loop_s,
	start: start,
	playsinline: 1,
	hl: playerLang,
	playlist: playlist,
	listType: listType,
	controls: controls_s,
	fs: preventFullScreen_s,
	cc_lang_pref: cc_lang_pref_s,
	iv_load_policy: iv_load_policy,
	modestbranding: modestbranding_s,
	cc_load_policy: showClosedCaptions_s,
	},
	events: {
	onReady: onPlayerReady,
	onError: onPlayerError,
	onStateChange: onPlayerStateChange,
	onPlaybackRateChange: onPlaybackRateChange,
	onPlaybackQualityChange: onPlaybackQualityChange,
	},
	});
	}

	function onPlayerError(event) {
	sendMessageToRN({eventType: 'playerError', data: event.data});
	}

	function onPlaybackRateChange(event) {
	sendMessageToRN({eventType: 'playbackRateChange', data: event.data});
	}

	function onPlaybackQualityChange(event) {
	sendMessageToRN({eventType: 'playerQualityChange', data: event.data});
	}

	function onPlayerReady(event) {
	sendMessageToRN({eventType: 'playerReady'});
	}

	function onPlayerStateChange(event) {
	sendMessageToRN({eventType: 'playerStateChange', data: event.data});
	}

	var isFullScreen = false;
	function onFullScreenChange() {
	isFullScreen =
	document.fullscreenElement \|\|
	document.msFullscreenElement \|\|
	document.mozFullScreenElement \|\|
	document.webkitFullscreenElement;

	sendMessageToRN({
	eventType: 'fullScreenChange',
	data: Boolean(isFullScreen),
	});
	}

	document.addEventListener('fullscreenchange', onFullScreenChange);
	document.addEventListener('msfullscreenchange', onFullScreenChange);
	document.addEventListener('mozfullscreenchange', onFullScreenChange);
	document.addEventListener('webkitfullscreenchange', onFullScreenChange);
	</script>
	</body>
	</html>