Custom WordPress loop (with video on home page only)
<p>I am trying to make a custom WordPress Loop in a child theme so that I can add a video to the background of the home page. I have added the template to the child theme for the page that I need to use. </p>

<p>The problem is that several other pages will be using the same template so I need to customize the loop so that it only shows the video on the front page but still uses the template for the rest of the content. </p>

<p>Here is the custom template with the custom loop that I have so far;</p>

<pre><code>    &lt;?php 
get_header(); ?&gt;

&lt;?php if (is_front_page()): ?&gt; 

&lt;div class="fullscreen-bg"&gt;
&lt;video loop muted autoplay poster="wp-content/uploads/2016/10/I_Waited_VA_Logo.png" class="fullscreen-bg__video"&gt;
    &lt;source src="wp-content/uploads/2016/07/I_Watied_VA_Video_1_Long_01.webm" type="video/webm"&gt;
    &lt;source src="wp-content/uploads/2016/07/I-Watied-VA-Video-1-Long.mp4" type="video/mp4"&gt;
    &lt;/video&gt;
    &lt;/div&gt;
&lt;?php endif; ?&gt; 

    &lt;div id="your-content"&gt;
&lt;?php 
while ( have_posts() ) :
    the_post();
    the_content();
 endwhile; 
 ?&gt; 
 &lt;/div&gt;



&lt;?php
get_footer();
    ?&gt;
</code></pre>

<p>This shows the video but it does not display properly. It also does not work on the other pages that use the template.</p>

<p>Here is the CSS that I am using in style.css;</p>

<pre><code>    @import url("../campaign/style.css");


    /* Full screen video*/
    .fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
    }

    .fullscreen-bg__video {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }

    @media (max-width: 767px) {
.fullscreen-bg {
    background: url('wp-content/uploads/2016/10/I_Waited_VA_Logo.png') center center / cover no-repeat;
}

.fullscreen-bg__video {
    display: none;
}
    }

    #your-content {
    position: relative;
    z-index: 1;
   }
</code></pre>