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
2332 350 1033

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
171 3 25

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)

Ninthony
Shopify Partner
2332 350 1033

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 13

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
2332 350 1033

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
Visitor
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
Visitor
1 0 1

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

SVNSales
Excursionist
25 2 13

Which part are you struggling with, exactly? 

ofimile123
Tourist
8 0 2

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 13

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

@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
8 0 2

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

Thanks a lot!

SVNSales
Excursionist
25 2 13

@ofimile123 happy to help, glad it worked!

kylo_zen
Visitor
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 11

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

 

 

 

 

 

viktor_vaughn
Visitor
2 0 0

I wish I can kiss you!

jamesMeegan
Excursionist
47 1 11

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
2332 350 1033

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 😄
graciax452
Tourist
4 0 4

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

SVNSales
Excursionist
25 2 13

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

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
Visitor
1 0 3

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

mjdubarr
Pathfinder
109 0 29

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

VinceLegentil
Tourist
8 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
25 2 13

@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
Excursionist
28 0 16

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
Excursionist
25 2 13

@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
Excursionist
28 0 16

Done! 

thank you very much 🙂

 

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

SCatMC
Tourist
11 0 11

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
New Member
6 0 0

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
New Member
6 0 0

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
Visitor
2 0 0

You are awesome 

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

Quinnie
New Member
4 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
25 2 13

@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
25 1 9

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

MrsBTriesToCode
Visitor
1 0 0

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
Excursionist
25 2 13

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

ZigguZ
Excursionist
18 0 14

@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
Shopify Partner
2332 350 1033

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.

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 😄
ZigguZ
Excursionist
18 0 14

@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
Visitor
2 0 0

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
Shopify Partner
171 3 25

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.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
Fiona92
Visitor
2 0 0
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
Visitor
2 0 0

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
Excursionist
24 1 9

@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 finedesktop working fine

 

mobile showing both videosmobile showing both videos

 

whiskeymon
New Member
6 0 0

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

MRamzan
Shopify Partner
171 3 25

Hello @whiskeymon  can you please share your store URL.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
Moin_Vegan
Visitor
1 0 0

 

<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
Visitor
1 0 0

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