Jump to content

Video resize in header when converting to mobile view

Recommended Posts

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

pw: danspeaks7467

I have an autoplay video in my header that is not resizing when I view it in mobile view here on SquareSpace. Additionally, it is not showing at all on my iOS device and have been testing a backup image, but would prefer the resized video to be autoplaying.

Thanks in advance for any help/suggestions/support! :)

Dan

 

Attachments:

Screenshots from web view and mobile view

Screen Shot 2020-07-28 at 6.22.00 PM.png

Screen Shot 2020-07-28 at 6.22.25 PM.png

Link to comment
  • Replies 30
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Home > design > Custom CSS

/* resize video banner mobile */
@media screen and (max-width:767px) {
.homepage #page section:first-child iframe {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 30vh !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 7 months later...
  • 2 weeks later...
On 3/16/2021 at 11:23 PM, canlooo said:

I'm having the same problem as well and unfortunately the CSS provided above did not work for me. Would be appreciated if there is other solution available. Thanks in advance 🙂

Each site needs a different code. Can you share link to your site?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
1 hour ago, CQURE said:

Add to Design > Custom CSS

/* resize video banner mobile */
@media screen and (max-width:767px) {
[data-section-id="6059a0f56efca41413e29ba3"] iframe {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="6059a0f56efca41413e29ba3"] {
    min-height: 20vh !important;
    height: 30vh !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
15 hours ago, tuanphan said:

Add to Design > Custom CSS


/* resize video banner mobile */
@media screen and (max-width:767px) {
[data-section-id="6059a0f56efca41413e29ba3"] iframe {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="6059a0f56efca41413e29ba3"] {
    min-height: 20vh !important;
    height: 30vh !important;
}
}

 

thanks @tuanphan     

 height: 50vh !important;

nice!!

Link to comment
  • 4 months later...
On 9/30/2021 at 7:00 PM, AshaFajara said:

The code doesn't work for my site. Can you provide the code for me too? @tuanphan https://www.fajararesidence.com/

Add to Design > Custom CSS > Then save & reload the site

/* resize video */
@media screen and (max-width:767px) {
[data-section-id="611bc66452b3c54d5aa08073"] video {
    width: 100% !important;
    height: auto !important;
}

[data-section-id="611bc66452b3c54d5aa08073"] {
    min-height: unset !important;
    height: 30vh;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 hours ago, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

/* resize video */
@media screen and (max-width:767px) {
[data-section-id="611bc66452b3c54d5aa08073"] video {
    width: 100% !important;
    height: auto !important;
}

[data-section-id="611bc66452b3c54d5aa08073"] {
    min-height: unset !important;
    height: 30vh;
}
}

 

I tried this but there's a grey block below the video on mobile version now. 

IMG_9382.PNG

Link to comment
On 10/5/2021 at 7:37 PM, AshaFajara said:

I tried this but there's a grey block below the video on mobile version now. 

IMG_9382.PNG

Try adjust 30 to another number

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 2/4/2022 at 8:02 PM, The-Pilot said:

Im having same issue @tuanphan mobile background video will not scale. Please can I get CSS code for my site it would be much appreciated. https://www.diamondtravel.club/

Hi.

If resize video fullsize, it will create a huge gap below video on mobile.

Do you still want to continue?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 2/7/2022 at 7:39 AM, tuanphan said:

Hi.

If resize video fullsize, it will create a huge gap below video on mobile.

Do you still want to continue?

Hi Tuanphan,

Thanks for getting back to me yes id still like to resize.

A question on that also if possible if i add an extra section underneath the video with different content would that close the gap or will that gap still be visible?

Or is it possible to resize just enough just so the text in the video is viewable?

 

Edited by The-Pilot
added question
Link to comment
  • 2 weeks later...
On 2/8/2022 at 11:04 PM, The-Pilot said:

Hi Tuanphan,

Thanks for getting back to me yes id still like to resize.

A question on that also if possible if i add an extra section underneath the video with different content would that close the gap or will that gap still be visible?

Or is it possible to resize just enough just so the text in the video is viewable?

 

It create gap because if resize, video height is small, more than device height

Add to Design > Custom CSS

/* Mobile home top video */
@media screen and (max-width:767px) {
body.homepage video {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 4/4/2022 at 2:23 AM, jondrees said:

Could you help me out as well @tuanphan?

www.dreesperformance.com 

I'm looking to get the mobile version zoomed out, so the whole video can be displayed.

Try adding to Design > Custom CSS

/* Mobile Homepage Top video */
@media screen and (max-width:767px) {
[data-section-id="5e838902c3a88631659acdfb"] video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
[data-section-id="5e838902c3a88631659acdfb"] {
    min-height: unset !important;
    height: 25vh;
    margin-top: 15vh;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
15 hours ago, jondrees said:

Than you that worked @tuanphan! Could you also help me with this page? https://www.dreesperformance.com/volleyball-training

Use this new code

/* Mobile Homepage Top video */
@media screen and (max-width:767px) {
[data-section-id="5e838902c3a88631659acdfb"], [data-section-id="5ff34fa9fc8ee327dd67a5fa"] {
video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
[data-section-id="5e838902c3a88631659acdfb"] {
    min-height: unset !important;
    height: 25vh;
    margin-top: 15vh;
}}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/6/2022 at 1:56 AM, tuanphan said:

Use this new code

/* Mobile Homepage Top video */
@media screen and (max-width:767px) {
[data-section-id="5e838902c3a88631659acdfb"], [data-section-id="5ff34fa9fc8ee327dd67a5fa"] {
video {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
[data-section-id="5e838902c3a88631659acdfb"] {
    min-height: unset !important;
    height: 25vh;
    margin-top: 15vh;
}}}

 

Thanks @tuanphan that worked for the video, but for some reason, the padding below the video did not crop, like it did for my homepage. It looks like the code is identical. Any idea?

Link to comment
15 hours ago, jondrees said:

Thanks @tuanphan that worked for the video, but for some reason, the padding below the video did not crop, like it did for my homepage. It looks like the code is identical. Any idea?

Can you take a screenshot of padding?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/12/2022 at 12:32 AM, jondrees said:

 

Screenshot_20220411-122935_Chrome.jpg

Don't remove any code in your current code.

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5ff34fa9fc8ee327dd67a5fa"] {
    min-height: unset !important;
    margin-top: 15vh;
    height: 25vh;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, tuanphan said:

Don't remove any code in your current code.

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5ff34fa9fc8ee327dd67a5fa"] {
    min-height: unset !important;
    margin-top: 15vh;
    height: 25vh;
}}

 

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.