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.

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

[SVNSales]

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]

No problem, glad it helped.

[SanaRenard]

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]

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

[SVNSales]

Which part are you struggling with, exactly? 

[ofimile123]

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]

@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]

@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]

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

Thanks a lot!

[SVNSales]

@ofimile123 happy to help, glad it worked!

[kylo_zen]

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

[jamesMeegan]

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. 

[claudiaG21]

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.

[viktor_vaughn]

I wish I can kiss you!

[jamesMeegan]

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]

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.

[graciax452]

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

[SVNSales]

@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]

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?🙂

[nuagethinker]

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

[mjdubarr]

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

[VinceLegentil]

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]

@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.

[CarlosDeco]

Hello @SVNSales @Ninthony 

I'm following all the answer, but I want to upload my video that it's in this URL, how can I change the code with my URL? 

https://youtu.be/gzy4Pi-PrKw

Thank you very much! 🙂

[SVNSales]

@CarlosDeco The code you'll want to replace is the 2 src="....." lines, which point to the video source. I'm not quite certain how to make this work with a YouTube video. You may try the embed link for the video if the regular one doesn't work, or just upload the video to Shopify as we've done here.

[CarlosDeco]

Done! 

thank you very much 🙂

It was the video, because I wrote the Youtube link, and I had to upload on Shopify!

[SCatMC]

Hi @SVNSales & @Ninthony ! I'm trying to accomplish exactly the same thing, muted video in background on homepage that autoplays and is on a loop. I've tried to implement your code into the custom liquid section once you're in the edit code space and I've inserted my video link into both source lines but I must be doing something wrong because certain things will show up red like it's not valid and no video comes up when I preview the page. I have no coding experience either so all of this is very new to me. Would love any guidance!

The code I've tried to copy and paste into the custom liquid,

<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>

and here's my video link that I've gotten after uploading to shopify files,

https://cdn.shopify.com/s/files/1/0604/0164/7832/files/Untitled_design.mp4?v=1645670377

[whiskeymon]

How would you resize this for desktop vs mobile? This code looks perfect on desktop, but on mobile I want to fill the whole frame of the phone with the middle section of the video. Full height, cropped width.

[whiskeymon]

How would we get this particular code to have the play button on the center of the video, which, when clicked, opens the video with sound in a pop out window?

[viktor_vaughn]

You are awesome 

[XtalS]

@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

[Quinnie]

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]

@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]

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

[MrsBTriesToCode]

This solution seems so simple but what code in the Dawn theme did you replace? I can see the .json files and I can see the liquid files. Are you just plugging in this style code before the video in the .json file for index?

I'm rusty when it comes to coding...

[SVNSales]

@  Don't need to touch any theme code, just add a "Custom Liquid" block in the theme builder and insert the code there. 

[ZigguZ]

@Ninthony

Thank you so much, works great!

Question, is there some code that would allow me to display one custom liquid section on desktop and another for mobile so that I can optimize the resolution of the video for each devices?

Thanks again,

[Ninthony]

That would probably be a bit more of an advanced edit. You could add 2 and hide one and show one depending on the screen size like this:

<style>
video {
width: 80%;
display: block;
margin: 0 auto;
}
.desktop-video {
display: none;
}
.mobile-video {
display: block;
}
/* screen sizes above 992 pixels */
@media (min-screen: 992px) {
.desktop-video {
display: block;
}
.mobile-video {
display: none;
}
}
</style>
<video controls autoplay class="mobile-video">
    <source src="/media/cc0-videos/flower.webm"
                  type="video/webm">
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
</video>
<video controls autoplay class="desktop-video">
    <source src="/media/cc0-videos/flower.webm"
                  type="video/webm">
    <source src="/media/cc0-videos/flower.mp4"
                  type="video/mp4">
</video>

But this would load two videos at once on your page which would increase load time. A better solution would probably be to swap out the sources based on screen size in Javascript.

[ZigguZ]

@Ninthony 

Thanks for your reply.

Your Javascript solution definitely sounds best.

Im not much of a coder, any chance you could give me a hand?

Id really appreciate it.

BR.

[Fiona92]

Hi Ninthony,

This is perfect - absolute genius!

I would like to use a much longer video, and Shopify Files does not let me upload files that exceeds 20MB. I don't want to use YouTube, and have tried placing a link from GoogleDrive, but only a black screen shows.

Do you have any solutions?

[MRamzan]

Hello Fiona. Can you share me the store link. I will check and help you to solve the issue. Maybe you can add me as staff with mohdramzaan112@gmail.com and I will solve it for you. Thanks.

[Fiona92]

Hi there,

I won't be able to add you as a staff member, I am not an admin.

But this is a link to the website: https://thesilvercollective.com/

[sonicray]

Thank you for providing a solution, however, I'm not too sure I understand this. Do I add that code to the sections > custom-liquid.liquid part? I cut and pasted the code, updated the video url, but nothing happened. Do I need to update elsewhere? Would you be able to provide a detailed step by step to someone who's not familiar with coding, or maybe point me in the right direction? I appreciate any help you can provide.

[bikerboi]

@Ninthony I am trying to specify two videos, one video (in landscape) play on the desktop, and a second video (square ratio) play on the mobile website. I am using the code below based on your previous reply directly in a custom liquid block within the Shopify theme editor.  Right now the desktop version works great, but when i switch to mobile it displays both videos. What changes should I make so that it only shows the mobile video? Thanks!

my website url is: https://kovaasport.com/

<a href="https://kovaasport.com/collections/bike-jerseys">

<style>
video {
	width: 100%;
	display: block;
	margin: 0 auto;
}
.desktop-video {
	display: none;
}
.mobile-video {
	display: block;
}
/* screen sizes above 992 pixels */
@media screen and (min-width: 992px) {
	.desktop-video {
		display: block;
	}
	.mobile-video {
		display: none;
	}
}
</style>

<video muted autoplay playsinline loop class="mobile-video">
    source src="square mobile video"
                  type="video/mp4">
    <source src="square mobile video"
                  type="video/mp4">
</video>

<video muted autoplay playsinline loop class=“desktop-video">
    source src="desktop landscape video"
                  type="video/mp4">
    <source src="desktop landscape video"
                  type="video/mp4">
</video>

<a>

desktop working fine

mobile showing both videos

[whiskeymon]

Hello, were you able to figure out how to get one correct-sized video onto mobile? I'm stuck where you left off.

[MRamzan]

Hello @whiskeymon  can you please share your store URL.

[Moin_Vegan]

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

.desktop-video {
  display: none;
}

.mobile-video {
  display: block;
}

/* Bildschirmgrößen über 992 Pixel */
@media (min-width: 992px) {
  .desktop-video {
    display: block;
  }
  
  .mobile-video {
    display: none;
  }
}
</style>

<video autoplay muted loop class="mobile-video">
  <source src="https://cdn.shopify.com/videos/c/o/v/a40102ec62ba4668a9e3735b71e937d0.mp4">
</video>
<video autoplay muted loop class="desktop-video">
  <source src="https://cdn.shopify.com/videos/c/o/v/8d5e8f8870824ca58b58eeff0c45b6d9.mp4">
</video>

I changed it a bit and now it is working fine 

[Vinct]

Hey @Ninthony, I used your code and added it to the custom HTML section. On Desktop its working, but on mobile it only shows the opening image and the video doesnt start. Do you have any solution for that? Here is a preview of my shop: https://r6mm2evuy75pt6v3-58739785879.shopifypreview.com