Dawn Theme - Custom HTML for Video Autoplay

Solved
SVNSales
Excursionist
25 2 9

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.

Accepted Solution (1)

Accepted Solutions
Ninthony
Shopify Partner
2272 342 935

This is an accepted solution.

You can use the custom liquid block just like the custom html block, upside is now  you can use liquid in it.

 

<style>
video {
width: 80%;
display: block;
margin: 0 auto;
}
</style>
<video controls autoplay>
    <source src="/media/cc0-videos/flower.webm"
                  type="video/webm">
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
</video>

 

That'll give you a video element that's 80% width and centered, video code taken directly from MDN Web Docs. Just change out your sources and change whatever styles.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 49 (49)
Ninthony
Shopify Partner
2272 342 935

This is an accepted solution.

You can use the custom liquid block just like the custom html block, upside is now  you can use liquid in it.

 

<style>
video {
width: 80%;
display: block;
margin: 0 auto;
}
</style>
<video controls autoplay>
    <source src="/media/cc0-videos/flower.webm"
                  type="video/webm">
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
</video>

 

That'll give you a video element that's 80% width and centered, video code taken directly from MDN Web Docs. Just change out your sources and change whatever styles.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
SVNSales
Excursionist
25 2 9

You're an absolute wizard, thank you for this simple and effective solution! The page is still a work in progress, but feel free to check out the preview here. I made some changes to the style - hide controls, muted, autoplay, playsinline, and loop - here's the resulting code for the benefit of others:

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
</video>

(I replaced my video URL with the example one)

 

Thank you, again!

 

Ninthony
Shopify Partner
2272 342 935

No problem, glad it helped.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
SanaRenard
New Member
1 0 1

Wow, guys, thank you so much for the code!

I have 0 knowledge and experience with coding and HTML, but with your code I made beautiful banner with video on my homepage!

Thanks a lot!

 

PLANBERLIN
New Member
1 0 1

I have tried this and I am still struggling. Is there a step I am missing? 

viktor_vaughn
New Member
2 0 0

You are awesome 

viktor_vaughn
New Member
2 0 0

I wish I can kiss you!

SVNSales
Excursionist
25 2 9

Which part are you struggling with, exactly? 

ofimile123
Tourist
4 0 1

Hello,

I've also tried to copy the code and it appears just blank. Ive uploaded my video to a YouTube channel and tried to copy the embed link etc but still just shows a blank section on my Shopify store where the video is supposed to be. Any advice?

SVNSales
Excursionist
25 2 9

@PLANBERLIN @ofimile123 try uploading your video file to the Shopify files area, and using the link generated there. Also make sure you're inserting the link in both places in the code, otherwise you won't see the video on some types of devices.

 

Did that fix both of your issues?

SVNSales
Excursionist
25 2 9

@ofimile123 @PLANBERLIN have you tried uploading your videos to the Shopify files section, and made sure you updated the link in both "source" lines in the code? Other than that, you could make sure the video "type" is selected correctly if not an mp4.

 

Did that work?

ofimile123
Tourist
4 0 1

@SVNSales Yes! Uploading the short clip to the shopify files worked perfectly for me!

Thanks a lot!

SVNSales
Excursionist
25 2 9

@ofimile123 happy to help, glad it worked!

jamesMeegan
Excursionist
47 1 9

So did you just add this as a section or what? I created a new section called Custom-Video-Player.liquid but nothing showed up so how did you implement it. 

Ninthony
Shopify Partner
2272 342 935

Its an already created section in dawn theme called Custom Liquid, you would add that to your homepage and then paste the code into the text area in the customize menu.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
kylo_zen
New Member
2 0 0

Is it possible to do a similar thing but embed a twitch stream instead of refrencing a video file?

jamesMeegan
Excursionist
47 1 9

Most likely possible, heres the code for the autoplay video i made:

<div class="container">

<video autoplay loop muted playsinline width="100%">
<source src="https://cdn.shopify.com/s/files/1/0601/8170/9029/files/video.mp4?v=1633566049" type="video/mp4"> </video>
</div>
<div class="overlay">
<p><button>
Click Here
</button></p>
</div>
</div>

 

You could try changing the source to the specific stream you wanna play and try to trigger it, you can get rid of the button if you want I was just messing around with it. 

graciax452
Tourist
4 0 4

Why do we have two src"" that are exactly the same video?

XtalS
Tourist
8 0 4

@Ninthony 

Thanks so much for the code! it works for me.

There are two things though I want to check if you could help:

1) after I replace the banner with the custom liquid, there is a huge white space between the video and header. How can I reduce it?

2) is there a way to add a button on the video like this, for example: https://www.localeclectic.com