How to have a different video background on mobile ?

Hi everyone !

Haven't found exactly what I'm looking for yet, so I figured I would ask here.

I made a promotional video for my company that I set as a background on the website's main page. However, I also made a vertical version of the same video to post on Tiktok and Instagram, and I would like to have it as the mobile background. 

This is my website : https://rtfxcreative.com (It's in french)

This is the original video : https://youtu.be/dSLlPzs87MY

And this is the vertical one for mobile : https://youtube.com/shorts/Kd9T37ntvIs

Ideally I would like to have them both directly hosted on the website instead of relying on YouTube links. Is there a way to do that ?

Thanks in advance for your help !

@timrocheleau You have the option to create a section with the vertical video background just below the background video section for desktop view. With custom CSS code, we can ensure that the section with vertical video background is visible only on mobile devices. Once you've created this section, I can provide you with the necessary code.

Additionally, you can download and upload the YouTube video on Squarespace and use it as a background. Thank you.

Thanks for your quick response @Lesum ! I just created the section like you said.

It worked ! Thank you so much for you help !

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/

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

On 2/19/2024 at 10:08 PM, 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/

You mean this video?

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?

On 2/21/2024 at 10:51 PM, AstonD said:

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?

You can share link to hidden page & enable it, we can check easier

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!

19 hours ago, AstonD said:

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!

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;
}}}

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!

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. 

On 6/8/2024 at 2:16 AM, AstonD said:

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. 

You can use this code to Custom CSS box

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1717751531830_3077 .intrinsic-inner, div#block-yui_3_17_2_1_1717751531830_3077 .embed-block-wrapper {
    padding-bottom: 150% !important;
}
}

@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

11 minutes ago, AstonD said:

@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

Or if you can add 2 videos with different format on same page, I can give you code to show 1 on desktop, show another on mobile.

@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 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>

On 6/10/2024 at 5:40 PM, AstonD said:

@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!

You can try both, as long as one shows ok for you, I can give code for both cases

On 6/10/2024 at 7:44 PM, AstonD said:

@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>

Which code are you referring to?

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.

On 6/13/2024 at 8:37 PM, AstonD said:

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.

Try a code like this to Custom CSS box

@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1718014921692_13519 iframe {
    width: 100% !important;
    height: 400px !important;
}
}

@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.


 

Hello there!

Im looking to solve the same issue, I have a horizontal full bleed video within my landing page at https://www.dustinsites.com , I would like to only show a vertical version of that video for mobile devices. I have the vertical version in a section directly below the horizontal greeting video. Can someone please help provide the code for this?

Thank you!!

On 6/21/2024 at 1:27 AM, nitsud said:

Hello there!

Im looking to solve the same issue, I have a horizontal full bleed video within my landing page at https://www.dustinsites.com , I would like to only show a vertical version of that video for mobile devices. I have the vertical version in a section directly below the horizontal greeting video. Can someone please help provide the code for this?

Thank you!!

You can use this approach.