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

Store Design
1

I am using the Boundless theme. I have attached/embedded a video into a page by using this code:

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

1 Like
2

@acorleone

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

3

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

1 Like
4

@acorleone

yes, please send your

5

http://doubleupldn.com/

6

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

1 Like
7

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

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

9

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

10

can you help me with mine too? Luriet.com

11

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

1 Like
12

@KC74929

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

13

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,

video { class:video-player; display:block; margin: 0 auto; controls preload: auto; } @media screen and (max-width: 800px) { video { width: 90%; } }
14

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!

15

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

16

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

17

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

18

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