Hi! I have used a Custom Liquid code to create a muted loop video for my website header. It looks very long on desktop/ tablet though, but looks great on mobile which is where 80% of my views are. Is there a way I can edit the code on desktop to make it look a little better? This is the code…
video { width: 100%; height: small; display: block; margin: 0 auto; }If possible, I would also love to have it going into the header if that makes sense, as opposed to having the grey bar at the top?
A few days ago, I shared a solution to the exact same issue. It’s pretty simple to fix: https://community.shopify.com/post/2978243
I don’t understand how to do that including the custom liquid I am currently using? Do I just add that at the bottom or something?
Try this:
I took variables from your website, but feel free to adjust them as needed in your template.
Also, please avoid using .mov files as video sources. Instead, encode them to MP4 using HandBrake (handbrake.fr), a free and open-source desktop video encoder. Use the highlighted settings shown in the screenshot. This will dramatically improve your video loading speed and ensure compatibility across all browsers.
Hi,
Thanks so much for helping. I tried that code and it showed up like this on desktop view- ideally I need it to be the full width. Is there a way I can do one custom liquid which says one video for mobile and one video for desktop, and the video for desktop I can create to be landscape so it fits better on the screen? If that makes sense!
The code above already should solve this exact issue.
Have you changed path to correct video files here:
const desktopSource = ‘https://cdn.shopify.com/videos/c/o/v/73e49ca51d8f4233a2905c7b11b3f646.mov’;
const mobileSource = ‘https://cdn.shopify.com/videos/c/o/v/73e49ca51d8f4233a2905c7b11b3f646.mov’;
?
Ahh thank you so much that’s perfect!!
Do you have any idea how I could get the video to go into the header? Also I have used a collage template and just one image to make my page listings, for example there’s an image which you can click the link through (I edited the code on it to allow a link to be added to the image), it looks great on mobile but again is slightly too big on desktop. How can I change that? I still want it to be big just not quite as big.
Great to hear it works!
I beg you to properly encode the video and reupload it. .mov is a very bad idea to use as a video format for the web.
Do you have any idea how I could get the video to go into the header?
The question isn’t quite clear, to be honest. Could you please explain it with some visuals, such as screenshots?
I will have a look at how to do that, thank you.
I was thinking of having the top banner ‘see through’ and having the video there but then you wouldn’t see the text so i might just leave it!
