<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="video-responsive">
<div id="ytbg" data-youtube="https://www.youtube.com/watch?v=32ES4gmYI7U"></div>
</div>
<script type="text/javascript" src="https://stamat.github.io/jquery.youtube-background/jquery.youtube-background.js"></script>
.video-responsive {position: relative;}
$(document).ready(function() {
$('[data-youtube]').youtube_background();
var window_width = $(window).width();
if (window_width > 992) {
var window_height = $(window).height();
$('.video-responsive').css('height', (window_height -84)+ 'px');
}
});
