Jump to content

Autoplay Video Code Block size on desktop vs mobile

Recommended Posts

Posted

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!

  • Replies 3
  • Views 530
  • Created
  • Last Reply
Posted
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

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

Posted

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!

 

Screenshot 2021-07-23 at 09.22.09.png

Screenshot 2021-07-23 at 09.21.52.png

Screenshot 2021-07-23 at 09.22.01.png

Screenshot 2021-07-23 at 09.22.13.png

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

 

Screenshot 2021-07-23 at 09.22.09.png

Screenshot 2021-07-23 at 09.21.52.png

Screenshot 2021-07-23 at 09.22.01.png

Screenshot 2021-07-23 at 09.22.13.png

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

 

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.