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. 👍