cyantarek/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
		  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

	<title>Hello, world!</title>
</head>
<body>
	<div class="container mt-5">
		<div class="row">
			<div class="col-6">
				<div id="player" class="embed-responsive"></div>
			</div>
			<div class="col-6 text-center">
				<h3>Products</h3>
				<div class="card">
					<div class="card-header"><h5 id="product"></h5></div>
				</div>
			</div>
		</div>
	</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
		integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
		crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
		integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
		crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
		integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
		crossorigin="anonymous"></script>

<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: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    let st = {
        2: {
            ev: "Google Products logo"
        },
        3: {
            ev: "Youtube Logo"
        },
        5: {
            ev: "Google Developers Logo"
        },
        9: {
            ev: "A man with red T-Shirt"
        }
    };

    function onPlayerStateChange(event) {
        if (player.getPlayerState() === 1) {
            let durationIns = player.getDuration();
            let remaining = durationIns - player.getCurrentTime();

            for (let i = Math.ceil(player.getCurrentTime()); i < Math.ceil(remaining); i++) {
                setTimeout(function () {
                    if (st[i] !== undefined) {
                        let data = st[i];

                        $("#product").text(data.ev)
                    }
                }, i * 1000)
            }
        }
    }

    function stopVideo() {
        player.stopVideo();
    }
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
	integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

	<title>Hello, world!</title>
	</head>
	<body>
	<div class="container mt-5">
	<div class="row">
	<div class="col-6">
	<div id="player" class="embed-responsive"></div>
	</div>
	<div class="col-6 text-center">
	<h3>Products</h3>
	<div class="card">
	<div class="card-header"><h5 id="product"></h5></div>
	</div>
	</div>
	</div>
	</div>

	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
	integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
	crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
	integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
	integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
	crossorigin="anonymous"></script>

	<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: '390',
	width: '640',
	videoId: 'M7lc1UVf-VE',
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
	}
	});
	}

	function onPlayerReady(event) {
	event.target.playVideo();
	}

	let st = {
	2: {
	ev: "Google Products logo"
	},
	3: {
	ev: "Youtube Logo"
	},
	5: {
	ev: "Google Developers Logo"
	},
	9: {
	ev: "A man with red T-Shirt"
	}
	};

	function onPlayerStateChange(event) {
	if (player.getPlayerState() === 1) {
	let durationIns = player.getDuration();
	let remaining = durationIns - player.getCurrentTime();

	for (let i = Math.ceil(player.getCurrentTime()); i < Math.ceil(remaining); i++) {
	setTimeout(function () {
	if (st[i] !== undefined) {
	let data = st[i];

	$("#product").text(data.ev)
	}
	}, i * 1000)
	}
	}
	}

	function stopVideo() {
	player.stopVideo();
	}
	</script>
	</body>
	</html>