Youtube api player with iframe and block control

<style>
@media (min-width: 768px){
#container{
height: 390px;
}
}
@media (max-width: 768px){
#container{
height: 190px;
}
}
</style>


<script type="text/javascript">
document.getElementById("row--50459").style.visibility = "hidden";
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var seek = localStorage.getItem('played');
var saveSeek=false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
playerVars: {
autoplay: 1, controls: 0, showinfo: 0, fs: 1, mute :1, rel: 0,

modestbranding: 1,

playsinline: 1, enablejsapi: 1, origin: window.location.href
},
videoId: 'XXXXXXXXX',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
//localStorage.removeItem('played');
var elem = document.createElement("img");
if(seek!= undefined ){

elem.setAttribute("src",
"https://d2saw6je89goi1.cloudfront.net/uploads/digital_asset/file/1114068/RESTART_OR_NOT.png");
elem.setAttribute("onclick", "playVideo()");
elem.setAttribute("id", "placeholder");
elem.setAttribute("style", "background-color: rgba(0, 0, 0, 0.1);cursor: pointer; max-width: 100%; height: 100%; width: 100%; position:absolute; inset: 0px;");
document.getElementById("container").appendChild(elem);
var div1= document.createElement("div");
div1.setAttribute("style", "position: absolute; inset: 50% 0px 0px;cursor: pointer; width: 50%; height: 200px;");
div1.setAttribute("onclick", "playVideo()");
document.getElementById("container").appendChild(div1);
var div2= document.createElement("div");
div2.setAttribute("style", "position: absolute; inset: 50% 0px 0px 50%;cursor: pointer; width: 50%; height: 200px;");
div2.setAttribute("onclick", "restartVideo()");
document.getElementById("container").appendChild(div2);
}else{
seek= 0.0;
elem.setAttribute("src",
"https://d2saw6je89goi1.cloudfront.net/uploads/digital_asset/file/1114065/CLICCA_per_ASCOLTARE.png");
elem.setAttribute("onclick", "playVideo()");
elem.setAttribute("id", "placeholder");
elem.setAttribute("style", "background-color: rgba(0, 0, 0, 0.1);cursor: pointer; max-width: 100%; height: 100%; width: 100%; position:absolute; inset: 0px;");
document.getElementById("container").appendChild(elem);
}
setInterval(myTimer, 1000);
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;

function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
function stopVideo() {
player.pauseVideo();
const element = document.getElementById("placeholder");
element.remove();
var elem = document.createElement("img");
elem.setAttribute("src",
"https://d2saw6je89goi1.cloudfront.net/uploads/digital_asset/file/1114070/STO_AND_PLAY.png");
elem.setAttribute("onclick", "playVideo()");
elem.setAttribute("id", "placeholder");
elem.setAttribute("style", "background-color: rgba(0, 0, 0, 0.1); cursor:pointer; max-width: 100%; height: 100%; width: 100%; position:absolute; inset: 0px;");
document.getElementById("container").appendChild(elem);
}
function restartVideo() {
seek=0;
playVideo();
}
function playVideo() {
saveSeek=true;
player.seekTo(seek);
player.unMute();
player.playVideo();
const element = document.getElementById("placeholder");
element.remove();
var elem = document.createElement("img");
elem.setAttribute("src",
"https://d2saw6je89goi1.cloudfront.net/uploads/digital_asset/file/1114071/VETRINO.png");
elem.setAttribute("onclick", "stopVideo()");
elem.setAttribute("id", "placeholder");

elem.setAttribute("style", "background-color: rgba(0, 0, 0, 0.1); cursor:pointer; max-width: 100%; height: 100%; width: 100%; position:absolute; inset: 0px;");
document.getElementById("container").appendChild(elem);
}
function myTimer() {
if(saveSeek == true){
var curtime=player.getCurrentTime();
seek=curtime;
localStorage.setItem('played', curtime);
if(curtime>6){
document.getElementById("row--50459").style.visibility = "visible";
}
}
}
</script>



<div id="root">
	<div id="container" class="containeryt" style="width=device-width; position: relative;" >
		<div id="player">
			</div>
	</div>
</div>