Dim html As String = $"<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<body>
<div id="player" style="height: 100%; width: 100%;"></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;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: '${videoID}',
playerVars: {
'autoplay': 0,
'mute': 0, // Start muted to bypass autoplay restriction
'controls': 1,
'playsinline': 1
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
// event.target.playVideo();
// setTimeout(function() {
// player.unMute(); // Unmute after 500 milliseconds
// }, 500);
B4X.CallSub("Player_Ready", true);
}
function playVideo() {
player.playVideo();
}
// This function will stop the video when called from B4X
function stopVideo() {
player.stopVideo();
}
function unMuteVideo() {
player.unMute();
}
function getPlayerDimensions() {
var playerElement = document.getElementById('player');
var height = playerElement.offsetHeight;
var width = playerElement.offsetWidth;
callB4aSub('Player_Dimensions', { Dimensions: [height, width] } )
}
function callB4aSub(b4xSubName, values) {
setTimeout(function() {
if (!values) {
return B4X.CallSub('CallB4xUiSub_Async', true, b4xSubName, "");
}
return B4X.CallSub('CallB4xUiSub_Async', true, b4xSubName, JSON.stringify(values));
}, 0);
}
</script>
</body>
</html>
"$