Background Video PHP

background-video.css

/* ---------- 6.1 Hero Video ---------- */
.home .page-header {
  padding: 24rem 0 7rem;
  height: 75vh;
  overflow: hidden;
}
#bgvid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
}
.home .page-header h1 {
  font-family: "Parisienne";
  font-size: 100px;
  font-size: 10rem;
}
.hero-subheader {
  float: left;
  width: 100%;
  text-align: center;
  margin-top: 35px;
  color: #fff;
  font-size: 20px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.8rem;
}
.home .page-header a.button {
  margin-top: 35px;
  background-color: #fff;
  color: #42484e;
  font-weight: 600;
  border: 2px solid #fff;
}
.home .page-header a.button:hover {
  background-color: #a5337d;
  color: #fff;
}
@media (max-width: 1000px)
  .home .page-header {
    height: 100vh;
  }
}

background-video.php

<?php
$wd_video_overlay_main_text = get_field( 'wd_video_overlay_main_text' );
$wd_video_overlay_sub_text = get_field( 'wd_video_overlay_sub_text' );
$wd_video_overlay_button = get_field( 'wd_video_overlay_button' );
?>

<div class="page-header">

    <video id="bgvid" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" poster="<?php echo get_home_url(); ?>/wp-content/uploads/2018/10/encore-hero-poster.jpg">
         <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/encore-hero.webm" type='video/webm'>
         <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/encore-hero.mp4" type='video/mp4'>
    </video>

    <div class="wrap">
         <?php if( $wd_video_overlay_main_text ) : ?>
              <h1 class="entry-title" itemprop="headline"><?php echo $wd_video_overlay_main_text;  ?></h1>
         <?php endif; ?>
         <?php if( $wd_video_overlay_sub_text ) : ?>
              <span class="hero-subheader"><?php echo $wd_video_overlay_sub_text; ?></span>
         <?php endif; ?>
         <?php if ( $wd_video_overlay_button ) : ?>
              <a class="button" href="<?php echo $wd_video_overlay_button['url']; ?>" target="<?php echo $wd_video_overlay_button['target']; ?>"><?php echo $wd_video_overlay_button['title']; ?></a>
         <?php endif; ?>

    </div>
</div>