Change the homepage fullscreen slider to youtube video background

by Peter D.

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.

  • Then you have to go to your store homepage and remove:
  • {{widget type="Swissup\EasySlide\Block\Slider" identifier="argento_luxury"}}
    
  • Please insert your created block video_background instead. You can use the WYSIWYG editor.
  • Save and Clear cache.
  • Recent articles