resize video banner on mobile

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!

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!
 

PS: there is a lot of potential for improving a site by adding  designated mobile pages
Example: using another (vertical) photo on mobile

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!

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!

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?