Full screen responsive background youtube/Vimeo video

full-screen-responsive-background-video.html

<div class="video-wrapper">
  <div class="video-foreground">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo get_field('video_id'); ?>?autoplay=1&mute=1&loop=1&rel=0&controls=0&showinfo=0&playlist=<?php echo get_field('video_id'); ?>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

<style>
  	.video-wrapper {
  		position: absolute;
  		width: 100%;
  		height: 0;
  		padding-bottom: 56.25%;
  		margin: 0px auto;
  		min-height: 100%;
  		z-index: 10;

		.video-foreground {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;

			 iframe {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
			}
		}
		@media (min-aspect-ratio: 16/9) {
		  .video-foreground { height: 300%!important; top: -100%!important; }
		}
		@media (max-aspect-ratio: 16/9) {
		  .video-foreground { width: 300%!important; left: -100%!important; }
		}
		@media (max-aspect-ratio: 16/9) and (max-width: 650px ) {
		  .video-foreground { width: 500%!important; left: -100%!important; }
		}
	}
</style>