Adding Full-width hero video to Debut theme

Shopify Partner
4 0 0

I would like to add a full-width hero video to the top of my debut theme. The video option under custom content doesn't span across the whole screen.  I've also tried creating a new section, but I couldn't figure out how to incorporate into  {{content_for_layout}}.

thanks for the help

0 Likes
Tourist
39 0 3

You need to add it to the index.liquid template file. 

0 Likes
Pathfinder
98 12 29

This should be a standard feature considering it's 2019, its fully possible by copying the existing Image with Text overlay html and changing it a bit,

Here is what you need simply change the location of the video to your video inside the <video> tags,

I've linked to a codepen below with everything you need to do it, paste the css at the bottom of your theme.scss file,

There's probably some errors in this as I don't know liquid but it works as far as I can tell,

 

https://codepen.io/jtr_95/pen/gyVvOQ

 

 

 

 

1 Like
New Member
1 0 0

Thanks JTR! Everything works great from the code you posted except the poster. Instead of showing a poster image before the video loads it just shows a blank white screen. Do you have any suggestions on how to fix this?  My website is cladmate.com.au

 

 

0 Likes
New Member
1 0 0

Hi JTR,

 

I tried adding the HTML to the index.liquid file, but I get an error on line 42 - {% schema %}....  Should this be added another place?  

0 Likes