Adding a sweet video to your homepage can be pretty cool. Here is a quick tutorial on how to do it in on your EvoX store. 

Before

After 🤩

Step 1

Upload your video to the media manager. Looking for a video, checkout Pixabay a FREE image and video site. Grab the link for the video as we'll need this later.

If you'd like a image to display while the video is loading (the 'poster') upload this into the media manager too. We will need the link for this image too!

Step 2 

Add the HTML Content widget to the homepage top container and copy and past the below code into the widget. 

<section id="section-top">
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2 tagline">
   <div class="row">
      <h1>Ruthlessly effective eCommerce <br> made simple</h1>
      <div class="col-md-12  ">
         <div class="row">
            <div class="col-md-6 col-xs-6">
               <a class="" href="#">
               <button type="button" class="btn btn-primary">Get a demo <img class="img-icon" src="https://evolutionx.io/images/white_icon.png" alt=""></button>
               </a>
            </div>
            <div class="col-md-6 col-xs-6">
               <a class="" href="#section-designed">
               <button class="btn btn-white">Learn more</button>
               </a>
            </div>
         </div>
      </div>
   </div>
</div>
<div>
   <div class="video-filter"></div>
   <div class="bgvid-c">
      <video id="bgvid" poster="https://staging.evocdn.io/dealer/1005/content/media/My_Banners/39763774-ec87f704-52d5-11e8-9706-5d25dc234bfd.png" autoplay loop muted playsinline>
         <source src="https://staging.evocdn.io/dealer/1005/content/media/My_Banners/Mountains-7418.mp4" type="video/mp4">
      </video>
   </div>
</div>
</section>

Change the logo by copy and pasting the correct url

<img class="main-logo" src="https://evolutionx.io/images/evolutionx_logo_white_360x109.png" alt="">

Change the video link

<source src="https://staging.evocdn.io/dealer/1005/content/media/My_Banners/Mountains-7418.mp4" type="video/mp4">
      </video>

Change the poster (static image while video loads) or you can remove the link if not required.

<video id="bgvid" poster="https://staging.evocdn.io/dealer/1005/content/media/My_Banners/39763774-ec87f704-52d5-11e8-9706-5d25dc234bfd.png" autoplay>

Change the tagline

<h1>Ruthlessly effective eCommerce <br> made simple</h1>

💡 Pro Tip: The logo, 'poster' image and tagline aren't a requirement so can be removed - we just think they look cool and are a great use of the space!

Step 3 

Add this CSS to the CSS code block in the Theme Options. 

/* start of video */

.tagline {
    z-index: 20;
}
.tagline:first-child {
    height: 54vh;
    min-width: 250px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}
section#section-top {
    height: 54vh;
    overflow:hidden;
}
.video-filter {
    z-index: 0;
    background-color: #2d364157;
    width: 100%;
    height: auto;
    position: absolute;
     left: 0;
}
.bgvid-c {
    height: 54vh;
    width: 100vw;
    overflow: hidden;
    position: absolute;
}
#bgvid {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: 100vw;
    position: relative;
}
#section-top h1 {
    color: #fff;
}
.img-icon {
    width: 10px;
    margin-top: -3px;
    margin-left: 5px;
}
.btn-white {
    background: transparent;
    border: 1px white solid;
    color: white;
}
.btn-white:hover {
    background: rgba(255, 255, 255, 0.37);
    color: white;
}
#section-top .btn-primary {
    border: 1px solid;
    border-color: white;
}
@media only screen and (min-width: 1501px) {

    #bgvid {
    bottom: 50%;
}

    }

@media only screen and (max-width: 1500px) and (min-width: 1220px) {

    #bgvid {
    bottom: 32%;
}

    }

@media only screen and (max-width: 992px) {
    #section-top h1 {
    font-size: 1.5em;
}
#section-top .btn {
    font-size: 23px;
    padding: 12px 30px;
}

}

@media only screen and (max-width: 600px) {
  h1 #section-top  {
    font-size: 1.5em;
}
#section-top .btn {
    font-size: 14px;
    padding: 10px 15px;
}

}

/* end of video */

Add some Javascript to your Footer Block


<script>
// Calculate the height when resizing
function vidCalc(){

var vidHeight = $('#bgvid').height();
var vidCalcHeight = Math.round(vidHeight);
var vertWindHeight = Math.round(window.innerHeight * .54);

if (vidCalcHeight <= vertWindHeight) {

$('section#section-top, .bgvid-c, .video-filter, .tagline:first-child').height(vidCalcHeight);

}
else {
$('section#section-top, .bgvid-c, .video-filter, .tagline:first-child').height(vertWindHeight);

};


}


$( document ).ready( vidCalc );
$( window ).resize( vidCalc );
</script>


That's it....check it out in all your screen sizes.
👍

Did this answer your question?