Jump to content

Vertical Video - change 16:9 container to vertical

Recommended Posts

Hi all, towards the bottom of https://www.visualspectrum.ch/ausgewaehlte-hospitality-und-hotel-interior-fotografie I embed a vertical video. In desktop mode the display is okay, although also there I am unable to move the video more towards the right edge of the screen because of the 16:9 container ("field) it is dropped into. The bigger issue is on mobile view though, where the video displays way too small. It should be as wide as the photos below and above. I am thinking I need a vertical container, then both issues would be resolved.? How can i do this? Thanks a lot for your help

Link to comment
  • Replies 11
  • Views 796
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)
On 4/7/2024 at 11:29 AM, tuanphan said:

You mean this video?

image.png.9505e96b4b9d3381d5b7f5b6bdcc6e4b.png

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

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 .video-player {
    padding-top: 90% !important;
}
}

 

@tuanphan many thanks, and yes, this is the video in question. your suggestion improves the display of the video, but still it doesn't fill the screen the way the images do. i attach a screenshot, you can see the video is wider and larger but still has more padding than the images above and below. this screenshot is with tweaked values (max-width to 3000 px and padding parameter to 100%) but that didn't translate to a visibile improvement. Oh and yes, on desktop it of course now makes the video huge, so that cannot be the solution. Any thoughts? Thanks very much

IMG_4479.PNG

Edited by miketerranova
Link to comment
On 4/10/2024 at 5:23 PM, miketerranova said:

@tuanphan many thanks, and yes, this is the video in question. your suggestion improves the display of the video, but still it doesn't fill the screen the way the images do. i attach a screenshot, you can see the video is wider and larger but still has more padding than the images above and below. this screenshot is with tweaked values (max-width to 3000 px and padding parameter to 100%) but that didn't translate to a visibile improvement. Oh and yes, on desktop it of course now makes the video huge, so that cannot be the solution. Any thoughts? Thanks very much

IMG_4479.PNG

You can use this CSS code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 video {
    object-fit: cover !important;
}
.fe-block-yui_3_17_2_1_1711831694026_15313 {grid-column-start: 2 !important;grid-column-end: 10 !important;}
}

 

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
1 hour ago, tuanphan said:

You can use this CSS code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 video {
    object-fit: cover !important;
}
.fe-block-yui_3_17_2_1_1711831694026_15313 {grid-column-start: 2 !important;grid-column-end: 10 !important;}
}

 

@tuanphan thank you again, this is taking care of the width on mobile, but now there is a new issue with the height of the video being cut, see the attached screenshot

IMG_4482.PNG

Link to comment
On 4/13/2024 at 5:04 PM, miketerranova said:

@tuanphan thank you again, this is taking care of the width on mobile, but now there is a new issue with the height of the video being cut, see the attached screenshot

IMG_4482.PNG

Use this code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1711831694026_15313 .native-video-player.video-player {
    padding-top: 90% !important;
}
}

 

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
On 4/19/2024 at 5:10 PM, miketerranova said:

@tuanphan thanks again. Now we are back where we were in the beginning, it's displaying the entire video but it is no longer going as wide as the photos above and below (always talking about mobile view). Is there no way to have both?? 

Did you remove previous code? You need to keep both code, and add new code under previous code

 

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

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.