Brooklyn theme- Hero Slide - Video as slide item

Excursionist
38 0 18

Dear @Faiq_Adam1, can you please share with me how you managed to do it?

I am totally new to Shopify, and been looking all over the place for way to have a video in the header.

mail@studiomoney.net

Warm Regards and Million Thanks in advance!

0 Likes
Excursionist
38 0 18

Hi Dear @Aaron_Cowan!

 

I tried to follow you there to the best of my below-basic-coding-abilities, and somehow managed to get the following:

 

A video in the header's background! Superb!

 

Now the only issues that remain to be solved are:

 

1. There is now a margin from the top of the page which pushed the logo and the menu downwards.

2. The text of the header is missing.

 

could you be please assist me with it?

 

mail@studiomoney.net

 

Kind regards and many thanks!Screen Shot 2020-11-27 at 9.png

0 Likes
Tourist
4 0 3

To anyone still needing this, Aaron's code works, with 1 small tweak:

you need to change "asset_url" into "file_url"

 

So this:

<video autoplay id="bgvid-hero" loop muted poster="{{ 'palace_poster.png' | asset_url }}">
        <source src="{{ 'intro.webm' | asset_url }}"
        type="video/webm">
        <source src="{{ 'intro.mp4' | asset_url }}"

 

turns into this:

<video autoplay id="bgvid-hero" loop muted poster="{{ 'YOUR IMAGE COVER FILENAME HERE.png' | file_url}}">
        <source src="{{ 'YOUR VIDEO FILENAME HERE.webm' | file_url }}"
        type="video/webm">
        <source src="{{ 'YOUR VIDEO FILENAME HERE.mp4' | file_url }}"

 

To remove the extra space before the announcement bar, or just to make your video fit the screen, remove "margin-top:100px;"  from the div class video-content:

<div class="video-content small-hide" style="opacity:.5;">

 

I prefer it with opacity 1 (instead of 0.5) so the video is fully colored instead of 50% opacity

Excursionist
38 0 18

@hertog Thanks a lot!

Tourist
9 0 2

Thank you hertog! So does this apply to the code by arron on page 4 of this thread, or is there another source for this?

I thought the one on page for had issues?

0 Likes
Tourist
4 0 3

Hi @realgamefx , I am using Pradeep's code + CSS with the additions from Aaron, and including my above edits.

To make things easier, here is all my code:

theme.liquid:

 

<div id="PageContainer" class="page-container">
    
    <main class="main-content" role="main">
      <!--Start Video Slider-->
{% if template == 'index' %}       
<div class="video-content small-hide" style="opacity:1;">
    <div class="hero-slide-media">
        <video autoplay id="bgvid-hero" loop muted poster="{{ 'FILENAME HERE.jpg' | file_url }}">
        <source src="{{ 'FILENAME HERE.webm' | file_url }}"
        type="video/webm">
        <source src="{{ 'FILENAME HERE.mp4' | file_url }}"
        type="video/mp4"></video>
         <div class="welcome-message is-dark" style="text-align:center;">
            <h1 class="hero_title">TITLE TEXT FOR IN THE VIDEO HEADER HERE</h1>
        </div>
        <div class="overlay" ></div>
    </div>
</div>
{% endif %}
<!--End Video Slider-->  
      {% unless template.name == "index" or template == "collection.image" %}
        <div class="wrapper">
      {% endunless %}
        {{ content_for_layout }}
      {% unless template.name == "index" or template == "collection.image" %}
        </div>
      {% endunless %}
    </main>

 

 

theme.scss.liquid:

 

/*Video Slider Related CSS*/
.video-content {
    height: 100vh;
    min-height: 450px;
    position: relative;
}

#bgvid-hero, #bgvid {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
  autoplay:true;
  controls:false;
  
}

.welcome-message.is-dark {
    color: #fff;
}

.welcome-message {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    z-index: 10;
}

.template-index .main-content {
    padding: 0;
}

.slick-slider {
    display: none;
}

.hero_title {
  font-size: 60px;
  color: white !important;
}

 

 

Some notes:

You need to upload your files via Settings > Files. Don't use underscores or indents, it likely doesn't work with the code.

Pradeep used 2 underscores in his "hero title" class. I changed it to just 1, to prevent mistakes on my end (I never used 2). So it is now 'hero_title'.

The hero_title class was never defined in the CSS, so any text you entered would be displayed in your standard font and size. I added this and override the color by using "!important", because I wanted it to be white, which was not the default for my theme. You can add more customization here if you want (font-family, etc).

If I recall correctly, I also changed the position slightly, to be more centered. In Pradeep's code it was more aligned to the bottom.

 

This should result in a working, full screen video header with your own text!

Tourist
9 0 2

Hertog, you are awesome! Thank you.

Tourist
4 0 3

I just noticed/fixed 2 more things. One is for the mobile view (to use an image) and one is to fix a bug: you won't see any mobile product images on the product pages because of the code.

Here is the updated CSS. I added comments to explain what I did and why.

 

/*Video Slider Related CSS*/
.video-content {
    height: 100vh;
    min-height: 450px;
    position: relative;
}

#bgvid-hero, #bgvid {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
  autoplay:true;
  controls:false;
  
}

.welcome-message.is-dark {
    color: #fff;
}

.welcome-message {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
    z-index: 10;
}

.template-index .main-content {
    padding: 0;
}

/* I added ".template-index" before the ".slick-slider" code. A small change, but this ensures you only hide the element on the front page, not on every page. If you only use ".slick-slider" it will somehow hide all your product images on the product page on mobile! */
.template-index .slick-slider { 
    display: none;
}

.hero_title {
  font-size: 60px;
  color: white !important;
}

/*This is the original code from Pradeep I think, which I left out before. It'll look better on mobile if you do this*/
/*Video Slider "poster" for when Mobile*/
@media (max-width: 992px){
  #bgvid-hero, #bgvid {display: none;}
  .video-content{ 
    background: url(your entire image //cdn.shopify url here, copied from Settings>Files) center center no-repeat scroll;
  width: 100%;
  height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
/* I reduced the size of the font to improve the position of the text, otherwise it was too high. */
  .hero_title {
    font-size: 40px;
  }
  
/* You can change the position even more by editing the values below. I set mine to bottom: 45% */
  .welcome-message {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 45%;
    z-index: 10;
}

}