AstonD

@tuanphan thanks for the quick feedback, I used your code and it makes the player vertical (on mobile) but when I play the video it is shown in normal (16:9) resolution. See attached image.

Now the final question is, is it possible to have this video zoomed so it fills the vertical frame and it looks like it is vertical? Is that possible with custom CSS code?

Thank you very much for your help.
Let me know if you need the password to the website to check better.


 

Thank you for your detailed feedback. This option seem to be the best in my case, but the problem is the Squarespace video upload limit is almost over and I have no more space to add videos directly with Video Blocks. That's why I am using the YT embed option. 

Anyway, I will remember this code in case I need it in the future.

Thank you,  @tuanphan

I am refering to the embeded code I am sending below. Just to be clear, previously I used "add video via link" and you send me a code to make it vertical. It didn't work, it just made the player vertical but the video inside the player was still 16:9 ratio. So, now I am trying to embed the video with the <embed> option and I need the code to try and make it vertical on mobile view.

This is the page: https://www.chrismailander.com/why-deals-fail
In the hero section you will see a video added with the <embed> option. The actual embed code for the video that I am using is this:

<center>
<iframe width="1048" height="590" src="https://www.youtube.com/embed/pSaEDOq8EUo?rel=0&autoplay=1&modestbranding=1" title="Chris Mailander - Why Deals Fail - Insider Series" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Now, I need the custom CSS code to make this video vertical on mobile view, ideally 2:3 ratio. Since the subject in my video is centered, I wanted to make the video to fit the vertical height of the player so it looks like a vertical video. Is that possible?

A screenshot of the actual page is attached to this message.

Let me know if you need the password to access the website and the page.

@tuanphan the last code you sent me was for Youtube linked video. Are you able to give me the CSS code for YT embedded video? To make the player vertical with youtube embedded video instead of a link.

For example, the page is: https://www.chrismailander.com/why-deals-fail

The block ID is shown in the attachment. I used custom CSS to make it autoplay and removed the related videos. I only need the player to be vertical on mobile view.

The current embed code is:

<iframe width="1048" height="590" src="https://www.youtube.com/embed/pSaEDOq8EUo?rel=0&autoplay=1&modestbranding=1" title="Chris Mailander - Why Deals Fail - Insider Series" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

@tuanphan Will do that right away. Just please tell me, should I add them in the same section or in different sections?

Also, I am trying to use YT embedded videos due to the size limitations on Squarespace. If I add the vertical video on Youtube, it will still be displayed in 16:9 format.. 

Let me know,

Thanks!

@tuanphan I used your code and it makes the player vertical but the video is still shown in 16:9 format inside the player (please see attachment). Ideally, I want the video to be cropped from both sides and displayed in vertical format. Is that possible with custom CSS?

Do you think it will help if I embed the video instead of inserting a link to it?

I created different page with embedded video instead of link - https://www.chrismailander.com/the-standard

Please help. I have the same problem, trying to resize a Youtube embedded video on my Squarespace website. I used Youtube embed code directly on the page (with embed tool). The video is showing in 16:9 ratio on the mobile page. Can you help me make the video vertical on mobile?

Link to the page: https://www.chrismailander.com/the-standard

Hi, I need help again. I am working on a separate landing page for my client and I have a Youtube linked video in the hero section that I want to make it vertical for the mobile view, ideally 2:3 ratio. Also, I don't want all of the YT videos on this website to be resized, I only need solution for this video.

Thank you!

Link to the page: https://www.chrismailander.com/95th-percentile

It is the first video, in the hero section. 

5 hours ago, tuanphan said:

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

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1707844493332_23360 {
.native-video-player.video-player {
    padding-top: 150% !important;
}
video {
    object-fit: cover !important;
}

.plyr__poster {
    background-size: cover !important;
}}}

 

It worked! Thank you @tuanphan!

I need some help here to resize a video on mobile view with custom CSS. I have a landing page with a horizontal video in the hero section and I want to resize the same video only for mobile to be in vertical format, ideally 2:3 ratio.

Also, the video is now embedded in Squarespace, would you please let me know if this is possible with YT linked video?

Link to the landing page: https://www.chrismailander.com/valuation-workshop

Thank you!

2 hours ago, tuanphan said:

You mean this video?

No, it is actually hidden page for now as I am working on it, it has embedded video directly on Squarespace. I can find the section ID number with the Chrome extension, just would you please help me with the code. I tried the code from the previous posts above but it didn't work, the ratio stays horizontal.

What can I do?

22 hours ago, AstonD said:

Hi, can you please help me with the same issue - I want to add different sized video for mobile. Ideally I would use a YouTube linked video but, additionally, I would like to have the code for embedded video as well.

my site: https://www.chrismailander.com/

@Lesum

Hi, can you please help me with the same issue - I want to add different sized video for mobile. Ideally I would use a YouTube linked video but, additionally, I would like to have the code for embedded video as well.

my site: https://www.chrismailander.com/