Fullscreen Video Background (Youtube or MP4)

To start, create an ACF Text field.

I named it Youtube video id or mp4 video link.

Now on the newly created field add:

oOkGmK3_Hdg – a Youtube video ID or
https://www.w3schools.com/howto/rain.mp4 – an MP4 video to test the Field.

Add in the PHP code in your hero php file.

    <?php if (!empty($content_options['youtube_video_id'])):
        $video = $content_options['youtube_video_id']; ?>
        <?php if(strtolower(end(explode(".",$video))) =="mp4"): ?>
            <video playsinline autoplay muted loop id="myVideo">
                <source src="<?php echo $video; ?>" type="video/mp4">
            </video>
        <?php else: ?>
            <div id="yt-wrap">
                <div id="ytplayer"></div>
            </div>
            <script>
                // This code loads the IFrame Player API code asynchronously.
                var video_id = '<?php echo $content_options['youtube_video_id']; ?>';
                var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/player_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                var player;
                function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                width: '100%',
                height: '100%',
                videoId: video_id,
                playerVars: {
                'autoplay': 1,
                'showinfo': 0,
                'autohide': 1,
                'loop': 1,
                'controls': 0,
                'modestbranding': 1,
                'vq': 'hd1140'
                },
                events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
                }
                });
                }
                // The API will call this function when the video player is ready.
                function onPlayerReady(event) {
                event.target.playVideo();
                player.mute(); // comment out if you don't want the auto played video muted
                }
                // 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.
                function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.ENDED) {
                player.seekTo(0);
                player.playVideo();
                }
                }
                function stopVideo() {
                player.stopVideo();
                }
            </script>        
        <?php endif; ?>    
    <?php endif; ?>

Add the Styles

make sure that the video parent container is set to overflow: hidden;

#myVideo {
  left: 0;
  position: absolute;
  top: 0;
  min-width: 100%; 
  min-height: 100%;
  z-index: 9;
  //@include media-breakpoint-down(sm) {
    //display: none;
  //}
}
#yt-wrap {
  left: 0;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 9;
  @include media-breakpoint-down(sm) {
    display: none;
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
  }
}