Autoplay Video Code Block size on desktop vs mobile

Site URL: https://tambourine-apple-mx9f.squarespace.com/semc

Hello! I've followed various bits of advice on here and got a video to auto play on a one of my site pages but in order for it to display properly on the desktop page I changed the width and height to values that are appropriate. This means that it displays absolutely huge on mobile and hangs off the edge of the screen. 

Is there some code I can use to adjust this and how can I stop this happening on other similar videos on other pages, when I upload them?

Similarly I wanted to add a secondary logo in my footer which again displays huge on mobile. Is there a way to adjust this for mobile as the spacer modules don't display. 

Thanks in advance!

13 hours ago, benji_roebuck said:

Site URL: https://tambourine-apple-mx9f.squarespace.com/semc

Hello! I've followed various bits of advice on here and got a video to auto play on a one of my site pages but in order for it to display properly on the desktop page I changed the width and height to values that are appropriate. This means that it displays absolutely huge on mobile and hangs off the edge of the screen. 

Is there some code I can use to adjust this and how can I stop this happening on other similar videos on other pages, when I upload them?

Similarly I wanted to add a secondary logo in my footer which again displays huge on mobile. Is there a way to adjust this for mobile as the spacer modules don't display. 

Thanks in advance!

Q1. Hi where is video?

Q2. You can add logo, then we will give the code to make it small on mobile only

Hey @tuanphan! The video should autoplay but there's screenshots attached of the issues - the video is the second image down and you can see how it hangs off the edge of the screen in mobile view.

The logo is the one I've added in the bottom nav – screenshots also attached of how it displays on desktop vs mobile. Any help much appreciated!

 

On 7/23/2021 at 3:39 PM, benji_roebuck said:

Hey @tuanphan! The video should autoplay but there's screenshots attached of the issues - the video is the second image down and you can see how it hangs off the edge of the screen in mobile view.

The logo is the one I've added in the bottom nav – screenshots also attached of how it displays on desktop vs mobile. Any help much appreciated!

 

Add to Design > Custom CSS

/* mobile Semc page */
@media screen and (max-width:767px) {
/* resize video */
div#block-yui_3_17_2_1_1626960429075_6605 iframe {
    width: 100% !important;
    height: 200px;
}
/* resize footer logo */
div#block-yui_3_17_2_1_1616522110650_7328 {
    width: 30%;
}
}