Solved

Dawn Theme - Custom HTML for Video Autoplay

SVNSales
Excursionist
25 2 13

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 Solutions (2)

Ninthony
Shopify Partner
2329 350 1023

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

MRamzan
Shopify Partner
92 1 19

This is an accepted solution.

I have solved this by below code:

 

<style>
video {
  display: block;
  margin: 0 auto;
  width: 50%;
}

@media screen and (max-width: 800px) {
  video {
    width: 90%;
    }
  }
</style>

<video controls autoplay loop playsinline muted>
  <source src="https://cdn.shopify.com/s/files/1/0550/0960/7817/files/video_1.mp4?v=1646563222" />
</video>

 

You can replace the video url with your own which is inside src=""

 

Note: Above code is valid for both desktop & mobile view.

For reference you can follow this video: https://youtu.be/26FfKhWP4Ag

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

View solution in original post

Replies 65 (65)