Resize Video for mobile view

Site URL: http://Scrambledapparel.com

I have had trouble resizing the video on my home page to fit in mobile view. I've used some css from another video to resize the images for mobile view but I've had no luck finding code to resize my video.

On 2/24/2022 at 2:20 AM, SethF said:

Site URL: http://Scrambledapparel.com

I have had trouble resizing the video on my home page to fit in mobile view. I've used some css from another video to resize the images for mobile view but I've had no luck finding code to resize my video.

Add to Design > Custom CSS

/* Mobile resize home video */
@media screen and (max-width:767px) {
[data-section-id="61a7e28062079629f1554acd"] video {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="61a7e28062079629f1554acd"] {
    min-height: unset !important;
    height: 30vh;
}
}

Hi @tuanphan - I'm also having trouble with my videos appearing full width in mobile view. 

I have resized them on the desktop version to be 90% of fullscreen, however, on mobile it would be better if they would be larger. I have used the media query to limit my code to desktop which helps. But you can see in the image below that the "You might also like" videos are showing wider than the video above it (Pink one). It would be better if the video could be the same width as the "You Might Also Like" videos. 

Any help would be much appreciated! Thank you!

On 5/3/2023 at 9:41 PM, ScoutMedia said:

Hi @tuanphan - I'm also having trouble with my videos appearing full width in mobile view. 

I have resized them on the desktop version to be 90% of fullscreen, however, on mobile it would be better if they would be larger. I have used the media query to limit my code to desktop which helps. But you can see in the image below that the "You might also like" videos are showing wider than the video above it (Pink one). It would be better if the video could be the same width as the "You Might Also Like" videos. 

Any help would be much appreciated! Thank you!

Can you share link to this page?

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

Many thanks!

On 5/8/2023 at 9:04 PM, ScoutMedia said:

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

 

Many thanks!

 

Password incorrect. Can you check it again?

Sorry about that! Should work now:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

On 5/8/2023 at 9:04 PM, ScoutMedia said:

Here is the website:

https://mandarin-poodle-dg32.squarespace.com/

PW: website

See Work>>Film>>select any project and see mobile display

 

Many thanks!

 

It looks like you removed You might also like section. I don't see it now

https://mandarin-poodle-dg32.squarespace.com/film/v/2023-showreel

Yes, I don't actually want the "You might also like" section to appear. But I would like the main video to be as wide as the "you might also like" videos appear. Or full width of the mobile screen. It will be easier for the user to press play/pause if the video were larger.

Many thanks in advance! 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.lesson-details {
    margin-left: 2px !important;
    margin-right: 2px !important;
}
}

Wonderful! Thank you!!!! Is there anything I can do to address the spacing/alignment of the description and pagination? The pagination in particular is crowding very close to the description and does not align with the description. 

Many thanks @tuanphan!

Quote

 

Add this code under

@media screen and (max-width:767px) {
section.lesson-item-pagination.lesson-item-pagination--prev-next {
    margin-top: 30px;
    padding-left: 0;
    padding-right: 0;
}
}

@tuanphan I want my video to fill the frame vertically on mobile -- currently there are black bars above and below the video. www.herojourney.io

On 8/2/2023 at 12:43 AM, ipratt said:

@tuanphan I want my video to fill the frame vertically on mobile -- currently there are black bars above and below the video. www.herojourney.io

To remove top/bottom black, we will need to reduce image height (with code). Dou you still need to continue?

@tuanphan Will that impact the image height for desktop too? Or just mobile. If just mobile, I definitely want to proceed. Not sure I fully understand the impact across the board though. 

On 8/4/2023 at 1:03 AM, ipratt said:

@tuanphan Will that impact the image height for desktop too? Or just mobile. If just mobile, I definitely want to proceed. Not sure I fully understand the impact across the board though. 

Hi, No. We can add code to force it run on Mobile Only. 

@tuanphan I actually would love help getting the video to resize properly for both mobile and desktop. The mobile issue I've already mentioned above. For Desktop, if the window is too small, it has black bars above and below. See screenshot. 
Can you help me with code?

Hello, please could you help me on this too?...

I have a video 3/4 of the way down this page -

meganshieldscreative.com/home/oxfam-donate-by-post-scheme

On mobile it is appearing very small, is there a way to make it bigger?

Thanks!

On 1/12/2024 at 5:40 AM, MSCreative said:

Hello, please could you help me on this too?...

I have a video 3/4 of the way down this page -

meganshieldscreative.com/home/oxfam-donate-by-post-scheme

On mobile it is appearing very small, is there a way to make it bigger?

Thanks!

It looks fine to me