Youtube API video background

footer.php

<script src="//www.youtube.com/player_api?ver=3.5.1"></script>

scripts.js

function onYouTubePlayerAPIReady() {
    jQuery(".youtube-bg").each(function(e) {
        var t = jQuery(this).attr("data-video-uid");
        var n = jQuery("#youtube-bg" + t).attr("data-video-url");
        player = new YT.Player("youtube-bg" + t, {
            playerVars: {
                autoplay: 1,
                controls: 0,
                autohide: 0,
                wmode: "opaque",
                loop: 1,
                modestbranding: 0,
                border: 0,
                showinfo: 0,
                hd: 1,
                playlist: n
            },
            videoId: n,
            events: {
                onReady: onPlayerReady
            }
        });
        jQuery('.circle-links-wrapper').on('mouseenter', function(){
        	player.pauseVideo();
        });
        jQuery('.circle-links-wrapper').on('mouseleave', function(){
        	player.playVideo();
        });
    });
}

function onPlayerReady(e) {
    e.target.mute();
    jQuery(".youtube-bg").each(function(e) {
        youtubesect = jQuery(".youtube-bg")[e];
        youtubesect.height = yheight;
        youtubesect.width = ywidth
    });
}

function videoBackgroundSize() {
    jQuery(".video-area").each(function() {
        jQuery("video").prop("muted", true);
        var e = 1500;
        var t = 1280;
        var n = 720;
        var r = parseInt(jQuery(this).find(".video-section").attr("data-video-height"));
        if (isNaN(r)) {
            r = jQuery(window).height()
        }
        var i = jQuery(window).width();
        var s = i / t;
        var o = r / n;
        var u = s > o ? s : o;
        e = 1280 / 720 * r;
        if (u * t < e) {
            u = e / t
        }
        // yheight = Math.ceil(u * n + 2);
        yheight = 1003;
        // ywidth = Math.ceil(u * t + 2);
        ywidth = 1783;
        jQuery(this).find(".video-wrapper, .video-content").width(i);
        jQuery(this).find(".video-wrapper, .video-section, .video-section-home, .video-content").height(r);
        jQuery(".video-wrapper").find("video, .video-cover, .video-cover img").width(Math.ceil(u * t + 2));
        jQuery(".video-wrapper").find("video, .video-cover, .video-cover img").height(Math.ceil(u * n + 2));
        if (jQuery(".vimeo-bg").length > 0) {
            jQuery(".vimeo-bg").each(function(e) {
                var r = jQuery(".vimeo-bg")[e];
                r.height = Math.ceil(u * n + 2);
                r.width = Math.ceil(u * t + 2);
                var i = jQuery(".vimeo-bg")[e],
                    s = $f(i);
                s.addEvent("ready", function() {
                    s.api("setVolume", 0)
                });
            });
        }
        jQuery(".youtube-bg").each(function(e) {
            youtubesect = jQuery(".youtube-bg")[e];
            youtubesect.height = yheight;
            youtubesect.width = ywidth
        });
    });
}
jQuery(document).ready(function() {
    if (jQuery(".video-area").length > 0) {
        videoBackgroundSize()
    };
    jQuery(window).bind("resize", function() {
        videoBackgroundSize()
    });
});

template.php

<?php $bgSrc = get_sub_field('section_background'); 
$video_id = get_sub_field('video_background_id')
?>

<section id="top_section" class="page-section" <?php if($video_id):?>style="background-color:#000;"<?php endif;?><?php if($bgSrc && !$video_id) : ?> style="background-image: url('<?php echo $bgSrc; ?>');"<?php endif; ?>>
	<?php if($video_id):?>
	<div class="video-area">
		<div class="video-section-home">
			<div class="video-wrapper">
				<iframe id="youtube-bg4356" class="youtube-bg" data-video-url="<?php echo $video_id;?>" data-video-uid="4356" frameborder="0" allowfullscreen="1" title="YouTube video player" width="1442" height="1003" src="https://www.youtube.com/embed/<?php echo $video_id;?>?autoplay=1&controls=0&autohide=0&wmode=opaque&loop=1&modestbranding=0&border=0&showinfo=0&hd=1&playlist=<?php echo $video_id;?>&enablejsapi=1&origin=http%3A%2F%2Fdiverseai.com"></iframe>
			</div>
		</div>
	</div>
	<?php endif;?>
	<div class="video-content">
		
	</div>

</section>

video.css

#top_section .video-area {
  width:100%;
  height: 100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow: hidden;
  position: absolute;
  z-index: 5;
}

#top_section .video-content {
  position: relative;
  z-index: 95;
  width:100%;
  height: 100%;
  top:0;
  bottom:0;
  background-color: rgba(0,0,0,0.4);
}