Jump to content

resize video banner on mobile

Recommended Posts

Site URL: https://www.add2beecreative.com/

Hi everyone,

Can anyone help or point me in the right direction with this video banner issue on my home page. Looks great on a desktop, however on a mobile has the edges cut off. Just looking it to play 16:9 across a mobile screen too. 

I've dug online and found many pieces of code,  tried to use the inspect element to make it applicable to my site, just no joy.

Any tips or pointers wold be fantastic!

Thank you!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi!

1) You'd get a good experience when making a second video that is specifically for mobile (vertical)
2) add a section and add the mobile video
3) Add some CSS (make sure you name the URLS accordingly to match with the CSS.
 

@media only screen and (min-width: 840px)
{#page-mobile{display: none !important}}

@media only screen and (max-width: 840px)
{ #page-desktop{display: none !important}}


PLEASE NOTE: As some mobile browsers are blocking background videos anyway, I'd recommend to test it with a random second video before investing further efforts in the video. A good backup is create a static graphic or a .gif loop

I hope that helps!
 

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment
26 minutes ago, ArminB said:

Hi!

1) You'd get a good experience when making a second video that is specifically for mobile (vertical)
2) add a section and add the mobile video
3) Add some CSS (make sure you name the URLS accordingly to match with the CSS.
 

@media only screen and (min-width: 840px)
{#page-mobile{display: none !important}}

@media only screen and (max-width: 840px)
{ #page-desktop{display: none !important}}


PLEASE NOTE: As some mobile browsers are blocking background videos anyway, I'd recommend to test it with a random second video before investing further efforts in the video. A good backup is create a static graphic or a .gif loop

I hope that helps!
 

Hi, thanks for your message and advice! Its definitely something i will look at as an alternative if I cant get a 16:9 version to function correctly. Thank you!

Link to comment
  • 2 weeks later...
On 2/23/2022 at 5:05 PM, ArminB said:

Hi!

1) You'd get a good experience when making a second video that is specifically for mobile (vertical)
2) add a section and add the mobile video
3) Add some CSS (make sure you name the URLS accordingly to match with the CSS.
 

@media only screen and (min-width: 840px)
{#page-mobile{display: none !important}}

@media only screen and (max-width: 840px)
{ #page-desktop{display: none !important}}


PLEASE NOTE: As some mobile browsers are blocking background videos anyway, I'd recommend to test it with a random second video before investing further efforts in the video. A good backup is create a static graphic or a .gif loop

I hope that helps!
 

Hi ArminB,

I hope your well!

I've gone ahead with your suggestion and made a version of the video that is 9:16 for mobile. If you have a moment, would you mind elaborating somewhat on the process of having both videos on the site? One for desktop on for mobile?

 

Many thanks!

Link to comment
On 3/4/2022 at 10:25 PM, adrianc84 said:

Hi ArminB,

I hope your well!

I've gone ahead with your suggestion and made a version of the video that is 9:16 for mobile. If you have a moment, would you mind elaborating somewhat on the process of having both videos on the site? One for desktop on for mobile?

 

Many thanks!

I don't see both videos on homepage. Which page are you referring to?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.