Jump to content

How to display video in vertical format?

Recommended Posts

Try adding this to Design > Custom CSS to adjust ratio

.sqs-native-video .native-video-player {
    padding-bottom: 100% !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
On 8/16/2022 at 4:56 PM, Maniola said:

Thank you @tuanphan – this did the trick for uploaded/native Squarespace video!

Is it possible to do a similar solution for embedded videos?

Can you share link to page where you use embed video?

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
18 hours ago, Maniola said:

@tuanphan 

Yes! There are examples in both classic editor and fluid engine on this page: https://www.clipsk.com/test

Try this CSS

.fe-block .embed-block iframe {
    width: 100% !important;
    height: 350px;
}

 

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 8/13/2022 at 5:18 PM, tuanphan said:

Try adding this to Design > Custom CSS to adjust ratio

.sqs-native-video .native-video-player {
    padding-bottom: 100% !important;
}

 

can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical.

Link to comment
On 8/28/2022 at 1:20 PM, Faten said:

can you apply this to certain videos? when i added it to my CSS it changed all videos on the website from horizontal to vertical.

Target with video block id.

#video-block-id .sqs-native-video .native-video-player {
    padding-bottom: 100% !important;
}

Find ID with this tool: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

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 8/13/2022 at 6:18 AM, tuanphan said:

Try adding this to Design > Custom CSS to adjust ratio

.sqs-native-video .native-video-player {
    padding-bottom: 100% !important;
}

 

Hey, thank you for this!  This worked, but the video player is wider than the video. How could I match the width? How do I apply it to only videos that I upload that are vertical, the CSS above didn't seem to do the trick. 

Screen Shot 2022-10-17 at 7.43.42 PM.png

Edited by andreaball
Link to comment
  • 1 month later...
  • 4 weeks later...
  • 4 months later...

Hi folks, 

Having similar trouble with video formatting as a background to a section on a homepage. Formatting of the video and the spacing of the adjacent section all looks good on desktop and mobile landscape, but on mobile portrait view, I end up with a big space underneath (image attached).

Website is here: BaltimoreSmartLine.org

If you need the PW DM me please.

Here's the CSS i'm using for video formatting now:

/**Full Width Block for mobile**/
@media screen and (max-width:767px) {
[data-section-id="5e8e5176957b3306a8e428c7"] video {
    width: 100% !important; 
    height: auto !important;
 left: 0 !important;
    top: 0 !important;
    bottom: 0 !Important; 
}

  [data-section-id="5e8e5176957b3306a8e428c7"] {
    
    height: 35vh;
    margin-top: 20vh;
}
}
 

Any thoughts on how to tighten up that spacing on mobile portrait view without messing up other views?

 

Thank you!

Screen Shot 2023-05-19 at 12.50.32 PM.png

Link to comment
On 5/20/2023 at 12:01 AM, tombigby said:

Hi folks, 

Having similar trouble with video formatting as a background to a section on a homepage. Formatting of the video and the spacing of the adjacent section all looks good on desktop and mobile landscape, but on mobile portrait view, I end up with a big space underneath (image attached).

Website is here: BaltimoreSmartLine.org

If you need the PW DM me please.

Here's the CSS i'm using for video formatting now:

/**Full Width Block for mobile**/
@media screen and (max-width:767px) {
[data-section-id="5e8e5176957b3306a8e428c7"] video {
    width: 100% !important; 
    height: auto !important;
 left: 0 !important;
    top: 0 !important;
    bottom: 0 !Important; 
}

  [data-section-id="5e8e5176957b3306a8e428c7"] {
    
    height: 35vh;
    margin-top: 20vh;
}
}
 

Any thoughts on how to tighten up that spacing on mobile portrait view without messing up other views?

 

Thank you!

Screen Shot 2023-05-19 at 12.50.32 PM.png

What is site url?

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
16 hours ago, tombigby said:

BaltimoreSmartLine.org

Don't remove any code in your current code

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e8e5176957b3306a8e428c7"] {
    min-height: unset !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

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.