Shopify themes, liquid, logos, and UX
I am using the Boundless theme. I have attached/embedded a video into a page by using this code:
<p><video controls="controls">
<source src="https://cdn.shopify.com/s/files/1/0549/8935/7222/files/double_up_ad_for_site.mp4?v=1646069513%0A" type="video/mp4" />
Your browser does not support our video.
</video></p>
The video views fine on desktop, however when viewing the site on mobile, it is too big and thus you cannot view the video or play button. Please could anyone help me with this.
Thanks
Solved! Go to the solution
This is an accepted solution.
can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
video {
width: 100%;
}
sorry for that mobile device doesn't support support auto play
Any solution I can do instead, as on mobile it shows as a blank space until you click it and the video plays. I want viewers to be able to see a video is there as it looks like a blank white space
yes, please send your
This is an accepted solution.
can you try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
video {
width: 100%;
}
Thank you so much ! this works. Lastly I want to ask, is there anything I need to get my site to have a SSL certificate? It currently says SSL pending on shopify, and my site shows as not secure on browsers which I believe is causing it to sometimes not load properly
and sorry I also want to ask, currently my products view as large images that you have to scroll to see, is it possible to change it to have my different products images viewed by clicking, similar to this page :
https://uk.trapstarlondon.com/collections/accessories-1/products/arch-snapback-black-olive
can you help me with mine too? Luriet.com
I’m so glad you posted-can you help my store is www.hostessy.io and it’s video templates and I just noticed thus on mobile - I see your code but do I enter it under assets, then theme editor on the bottom? - I just see theme editor under assets not theme.scssliquid
oh sorry but i can't see any issue at home page
Hi Ketan,
I have put in the below code for the video. But it is not working on mobile. Can you please check the code below and let me know what I can do to resolve it?
Thanks,
<style>
video {
class:video-player;
display:block;
margin: 0 auto;
controls preload: auto;
}
@media screen and (max-width: 800px) {
video {
width: 90%;
}
}
</style>
<video muted autoplay loop playinline>
<source src="https://cdn.shopify.com/videos/c/o/v/85db887b04a344679fa623acd382439c.mp4 "
type="video/mp4"/>
<video muted autoplay loop playinline>
<source src="https://cdn.shopify.com/s/files/1/1921/4619/files/Sequence_01_3.webm?v=1664158933 "
type="video/webm"/>
</video>
Hi KetanKumar, does the above code also work for Symmetry theme please? I have the same issue with this purchased theme - backgroudn video does not show up on mobile (only as a black space).
Thanks!
Hello Ketan, could you please help me with my video? I am using the Motion theme for Shopify. The first video at the top of the page plays on desktop, but does not on mobile. On the shopify store it's "Video hero". It just sits and loads on mobile and will not play. If you want to look at the site it is https://relentlessrebel.com
Hello, can you help me with the same problem I am having on my theme?
I am using cascade theme and the video plays on desktop but not on mobile. very frustrating.
Hello...where do we need to put this code in Spotlight, can you say?
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025