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

You can use the custom liquid block just like the custom html block, upside is now you can use liquid in it. 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.

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! :slightly_smiling_face:

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

Done! thank you very much :slightly_smiling_face: It was the video, because I wrote the Youtube link, and I had to upload on Shopify!

[email removed] 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,

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

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

I have solved this by below code: video { display: block; margin: 0 auto; width: 50%; } @media screen and (max-width: 800px) { video { width: 90%; } } 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…

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…

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

Dawn Theme - Custom HTML for Video Autoplay

Store Design

ZigguZ February 23, 2022, 5:31pm 38

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

Topic		Replies	Views
How do I display a different video for desktop and another for mobile with the Dawn theme? Store Design design	52	793	August 8, 2025
How can i auto play videos in Dawn theme? Technical Q&A	36	469	May 7, 2024
How can I fix video autoplay issues on Dawn Theme for mobile view? Store Design	1	35	August 9, 2022
How can I create a video with text section in the Dawn theme? Store Design	126	2344	April 7, 2025
Why isn't my video autoplay working in the Dawn theme? Store Design design	6	104	February 20, 2024

Dawn Theme - Custom HTML for Video Autoplay

Related topics