Arka Plan Video Oynatma

<style>
.videoContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

</style>
<div class="videoContainer" style="overflow:hidden;">
<iframe style="position: absolute;top:0;left:0;" class="videoContainer__video" id="video" allow="autoplay; encrypted-media" allowfullscreen src="http://www.youtube.com/embed/HtqXykxV044?modestbranding=1&autoplay=1&mute=1&enablejsapi=1&controls=0&fs=0&loop=1&rel=0&showinfo=0&disablekb=1&playlist=IsBInsOj8TY" frameborder="0"></iframe>
</div>
<button id="unmuteButton"></button>

<script>
unmuteButton.addEventListener('click', function() {
video.muted = false;
});
</script>
<script>
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}

function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}

var el = document.getElementById("video");
var width2 = (getHeight() * 16) / 9;
var height2 = (getWidth() * 9) / 16;

if (getWidth() < width2)
{
el.style.width = (getHeight() * 16) / 9 + 'px';
el.style.height = getHeight + 'px';
}
else
{
el.style.width = getWidth() + 'px';
el.style.height = (getWidth() * 9) / 16 + 'px';
}

</script>