@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.
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?
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?
@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.
Hi! This is awesome content! Did anyone find a solution to the big white space between the header and the video?
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.
Hi,
So I followed your guide: changing source at 2 places. However my file as copied from Shopify Files Section is as follows:
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.
@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
You are a genius! Thank you so much for sharing - this worked perfectly for me too!
Struggling to remove the open space above the video as well. Has anyone found a solution?
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…
[email removed] Don’t need to touch any theme code, just add a “Custom Liquid” block in the theme builder and insert the code there.
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?
Thank you very much!
@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
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 size in Javascript.
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.
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,
video { width: 100%; height: auto; display: block; margin: 0 auto; }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
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 can follow this video: https://youtu.be/26FfKhWP4Ag