Jump to content

Resize Video for mobile view

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

On 2/24/2022 at 2:20 AM, SethF said:

Site URL: http://Scrambledapparel.com

I have had trouble resizing the video on my home page to fit in mobile view. I've used some css from another video to resize the images for mobile view but I've had no luck finding code to resize my video.

Add to Design > Custom CSS

/* Mobile resize home video */
@media screen and (max-width:767px) {
[data-section-id="61a7e28062079629f1554acd"] video {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="61a7e28062079629f1554acd"] {
    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
  • 1 year later...

Hi @tuanphan - I'm also having trouble with my videos appearing full width in mobile view. 

I have resized them on the desktop version to be 90% of fullscreen, however, on mobile it would be better if they would be larger. I have used the media query to limit my code to desktop which helps. But you can see in the image below that the "You might also like" videos are showing wider than the video above it (Pink one). It would be better if the video could be the same width as the "You Might Also Like" videos. 

Any help would be much appreciated! Thank you!

Screen Shot 2023-05-03 at 10.36.53 AM.png

Link to comment
On 5/3/2023 at 9:41 PM, ScoutMedia said:

Hi @tuanphan - I'm also having trouble with my videos appearing full width in mobile view. 

I have resized them on the desktop version to be 90% of fullscreen, however, on mobile it would be better if they would be larger. I have used the media query to limit my code to desktop which helps. But you can see in the image below that the "You might also like" videos are showing wider than the video above it (Pink one). It would be better if the video could be the same width as the "You Might Also Like" videos. 

Any help would be much appreciated! Thank you!

Screen Shot 2023-05-03 at 10.36.53 AM.png

Can you share link to this page?

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 5/8/2023 at 9:04 PM, ScoutMedia said:

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

 

Many thanks!

 

Password incorrect. Can you check it again?

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 5/8/2023 at 9:04 PM, ScoutMedia said:

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

 

Many thanks!

 

It looks like you removed You might also like section. I don't see it now

https://mandarin-poodle-dg32.squarespace.com/film/v/2023-showreel

image.png.de78c285851a443d7fa94268cb13fe8f.png

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

Yes, I don't actually want the "You might also like" section to appear. But I would like the main video to be as wide as the "you might also like" videos appear. Or full width of the mobile screen. It will be easier for the user to press play/pause if the video were larger.

 

Many thanks in advance! 

Link to comment

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.lesson-details {
    margin-left: 2px !important;
    margin-right: 2px !important;
}
}

image.png.04505ba3232776945ca21567477976e1.png

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

Wonderful! Thank you!!!! Is there anything I can do to address the spacing/alignment of the description and pagination? The pagination in particular is crowding very close to the description and does not align with the description. 

 

Many thanks @tuanphan!

Quote

 

 

Screen Shot 2023-05-15 at 11.26.16 AM.png

Link to comment

Add this code under

@media screen and (max-width:767px) {
section.lesson-item-pagination.lesson-item-pagination--prev-next {
    margin-top: 30px;
    padding-left: 0;
    padding-right: 0;
}
}

 

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

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.