Re: Video not playing on mobile

Solved

Why isn't my embedded video displaying correctly on mobile?

acorleone
Excursionist
37 0 11

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

Accepted Solution (1)
KetanKumar
Shopify Partner
37583 3668 12151

This is an accepted solution.

@acorleone 

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%;
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 17 (17)

KetanKumar
Shopify Partner
37583 3668 12151

@acorleone 

sorry for that mobile device doesn't support support auto play

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
acorleone
Excursionist
37 0 11

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

KetanKumar
Shopify Partner
37583 3668 12151

@acorleone 

yes, please send your

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
acorleone
Excursionist
37 0 11
acorleone
Excursionist
37 0 11

http://doubleupldn.com/
the video is on the ‘our story’ tab

KetanKumar
Shopify Partner
37583 3668 12151

This is an accepted solution.

@acorleone 

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%;
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
acorleone
Excursionist
37 0 11

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

 

acorleone
Excursionist
37 0 11

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 

bysaleh
Tourist
4 0 0

can you help me with mine too? Luriet.com

KC74929
Visitor
1 0 1

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

KetanKumar
Shopify Partner
37583 3668 12151

@KC74929 

oh sorry but i can't see any issue at home page

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Sabeen1
Tourist
11 0 1

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>

davidavid
Visitor
1 0 0

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!

relentlessrebel
Excursionist
48 0 5

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 

josephbutsch
Visitor
2 0 0

Hello, can you help me with the same problem I am having on my theme?

josephbutsch
Visitor
2 0 0

I am using cascade theme and the video plays on desktop but not on mobile. very frustrating. 

WeHeartRocks
Excursionist
36 0 7

Hello...where do we need to put this code in Spotlight, can you say?