Dawn Theme - Custom HTML for Video Autoplay

[SVNSales]

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.

[Ninthony · 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.

[Sp80]

Hi, sorry for my question but where should paste this info to get this function? Plus I would like to upload the video with audio? Is that possible? 

[simash]

Hello. The code worked perfectly for desktop and androids. However, the video is not showing up on iPhones. Can you help?

[iriiin]

This worked great! Would it be be possible for it to auto play? 

[jammusicschool]

Hey, thank you for this. I now have a working video autoplay banner, but how do I add text overlay please? Everyones solutions I've tried just adds an H1 to the top of the video rather than an overlay in the themes styling. Any help appreciated!

[MRamzan]

For this you will have to add some CSS code. If you don't have any idea of coding then you can connect me. I will help you to solve this. Thanks.

[Tierrashowe]

I've followed the video instructions on how to add the code, but my video still isnt auto playing. Any suggestions?

[MRamzan · 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

[SCatMC]

Thank you SO much, you're a wizard, that video was also very helpful! The code is working but my video isn't. My video just remains blank and I'm not sure what the issue is. I've tried using the URL from Youtube's Share button and the URL from Youtube's Embed button and both gave me a blank video. I've also tried going to Embed Responsively and getting the embed code from there but I'm still left with a blank video. Any advice is appreciated, thanks Mohammed!!! 🙂

[MRamzan]

Hi. Please connect me. I need to check the store. Email: mohdramzaan112@gmail.com

[tixx2]

Thank you so much for your YT video. It helped me a lot!!

[_nel_castaneda]

Thank you @MRamzan 🤗

[rohan_alter]

This is great, thank you! Is there any way you can add a link to this video so that it can click through to a collection page at all?

Thanks!

[MRamzan]

You can try this code: Just replace the URL (link) with your collection page link.

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

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

<a href="https://shopwebsitecodes.com">
  <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>
</a>

[rohan_alter]

Amazing! Thank you so much!

Is there any way I could make the mobile video to be portrait instead of landscape?

[MRamzan]

Here is the solution for you to put two different videos in mobile view and desktop view.

[FrancescoS]

Hi! I tried to use your code and it works perfectly on desktop, but with mobile it shows only with iOS devices from iPhone X, 11, 12 ecc..

Also with Android device it doesn't work.

I've tried directly with some devices, not using "inspect".

Did you know how to fix that? 

Thank you!

[MRamzan]

You can follow this quick video also: