Jump to content

Video size on mobile devices

Go to solution Solved by tuanphan,

Recommended Posts

Hello!

I have noticed that on the mobile device the videos are rather small. When I see them in squarespace I see that  the video is nowhere close to the size of the actual container itself. There seem to be a lot of dead space between the video and the container. 

 

Is there any way with code to decrease that space and enlarge the video on mobile devices only?

 

This would also be page specific and not for every video.

I have put a link to the page with the video of the black car at the top of the page.

https://www.kaliberautodetailing.com/ceramic-paint-coatings

 

the attached pictures show the space to the left and right of the video on mobile view and then also in the squarepsace editor. You can see the video and the blue line around it

 

Thank you!

2024-03-02_22-35-33.png

2024-03-02_22-33-55.png

Link to comment
  • Replies 4
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

You can use this code to Website > Website Tools > Custom CSS

/* Video size on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1694412749194_947624 .native-video-player.video-player {
    padding-top: 120% !important;
}
}

image.thumb.png.b2d1140ccab1b711ea7738c587238c07.png

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
Posted (edited)

Will this same code work if I was to put it into a code block on each page?

 

EDIT: no, no it does not lol. Is there a way to make it work in a code block to be page specific? I have several pages with videos like that. Looks like that code only affected the main page and not the other city pages I have made.

 

Edited by Rmarkjr
updated info
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.