Dawn Theme - Custom HTML for Video Autoplay

Solved
SVNSales
Excursionist
23 2 7

Hello all!

I'm building a new online store using the Dawn theme, but have encountered a major obstacle with no solution I can find.

Essentially, I want my home page to have an autoplaying, muted, looped short video on it. I have explored the the built in "video" section as well as tried using a GIF in the "image" section, but encounter clunky "click to watch" functionality with the former and GIF size/quality limitations with the latter. This leads me to believe my only option is a custom HTML element - of which I found a helpful example on this community post.

However, I can't for the life of me find a way to add a custom HTML section/block to the Dawn theme, the way I could with older ones. The closest I see is "Custom Liquid". Even the "edit code" option just takes me to a list of .liquid and .css files, with no apparent way of creating an HTML element. What am I missing here?

Also open to other solutions to this problem, as long as the end result is a nice video playing when customers visit my page! I can upload the video anywhere (YouTube, Drive, Shopify files, etc.) that'll allow this to work.

Much appreciated.

Replies 29 (29)
SVNSales
Excursionist
23 2 7

@graciax452 one for desktop viewers and one for mobile. I'm sure there's some way to consolidate if you don't like the look of it.

graciax452
Tourist
4 0 3

Thanks @SVNSales now I understand Do you also have an idea how I can reduce the large whitespace before the video below the header that I seem to have now?

VinceLegentil
Tourist
6 0 0

Thank you for sharing the code @SVNSales. Do you know if there's a way to add a text and a link on top of the video?

SVNSales
Excursionist
23 2 7

@VinceLegentil happy to help! Not sure how you'd add such a thing to the video container itself, but you could always add a formatted hyperlink above the video.

nuagethinker
New Member
1 0 3

Hi! This is awesome content! Did anyone find a solution to the big white space between the header and the video?

claudiaG21
New Member
1 0 0

Hi @jamesMeegan 

 

Thanks for your help, I´ve seen it works properly when i first land into the Home page; however when i came back from another section to the Home the video dosen`t play.

 

Could you help me whit this ASQ, thank again.

 

 

 

 

 

Quinnie
New Member
1 0 0

Hi, 

So I followed your guide: changing source at 2 places. However my file as copied from Shopify Files Section is as follows:

https://cdn.shopify.com/s/files/1/0594/9970/8578/files/CH02-20210331-164655-164758-002001000000.mp4....

 

What kind of file is it? Do I need to change the type to xspf instead of mp4? Even after I've tried changing, the video still show total black screen (the video block showed up but there is no content). I dont know what I've done wrong now. 

 

 

SVNSales
Excursionist
23 2 7

@Quinnie the file link looks fine, and an mp4 file should work without issue. If you post your code segment I can try having a look

chloe27
Excursionist
21 0 9

You are a genius! Thank you so much for sharing - this worked perfectly for me too!

mjdubarr
Explorer
60 0 13

Struggling to remove the open space above the video as well. Has anyone found a solution?