Please do as follows:
- Changing the slider to video background requires creating of CMS block i.e. video_background with the following content:
<style>
.title-container {
position: absolute;
top: 40%;
text-align: center;
margin: 0 auto;
z-index: 1;
width: 100%;
}
.title-container h1,
.title-container h4{
color: #fafafa;
text-transform: uppercase;
}
.title-container h1 {
font-size: 55px;
letter-spacing: 50px;
}
.title-container h4:after {
content: "";
display: block;
width: 40px;
height: 5px;
background-color: #ea8e6a;
margin: 16px auto;
margin-bottom: 0;
}
.title-container button.button span{
background-color: transparent;
color: #fff;
min-width: 200px;
}
.title-container button.button span span {
text-transform: uppercase;
font-size: 14px;
background-color: transparent !important;
height: auto;
line-height: 36px;
}
.homepage-video {
position:relative;
}
@media (min-aspect-ratio: 16/9) {
.homepage-video {
height: 100%;
top: -10%;
}
}
@media (max-width: 768px) {
.homepage-video {
width: 300%;
left: -100%;
}
}
</style>
<div class="homepage-video">
<div class="title-container">
<h4>2001</h4>
<h1>Space Odyssey </h1>
<button class="button btn-alt">
<span><span>Shop Now</span></span>
</button>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe style="pointer-events: none;" type="text/html"
src="https://www.youtube.com/embed/W0LHTWG-UmQ?autoplay=1&controls=0&disablekb=1&fs=0&loop=1&modestbranding=1&rel=0&playlist=W0LHTWG-UmQ"
frameborder="0" class="embed-responsive-item"></iframe>
</div>
</div>
Note: Change the https://www.youtube.com/embed/W0LHTWG-UmQ and the &playlist=W0LHTWG-UmQ to your required video from Youtube.
{{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_luxury"}}