Jump to content

Video resize in header when converting to mobile view

Recommended Posts

Hi there,

I found this on a different forum about this subject. 
This code works but am needing to find code so that it swaps out the video and uses 4:5 video rather than the 16:9.

Currently this with no coding:


714478533_Screenshot2021-09-16at22_32_46.thumb.png.ac58b6b5ae8049d6265120ef3ad973ef.png



 
Then when I insert the code below this it changes to - see below: (Mobile view)

1443706532_Screenshot2021-09-16at22_36_35.thumb.png.901bacff624bc686e5cf18a171eeb859.png

 
section[data-section-id="insert here"] iframe {
    width: auto !important;
    left: 0 !important;
    height: auto !important;
}
section[data-section-id=""insert here""] {
    min-height: 25vh !important;
    height: 30vh !important;
}
}

----------------------

So I am needing code to using two different video formats:

1: Desktop 16x9 video
2. Mobile 4x5 video 


Does anyone have the right code for this? 





 
Link to comment
  • Replies 1
  • Views 600
  • Created
  • Last Reply

Hi,

use this new code

@media screen and (max-width:767px) {
section[data-section-id="insert here"] iframe {
    width: auto !important;
    left: 0 !important;
    height: auto !important;
}
section[data-section-id="insert here"] {
    min-height: 25vh !important;
    height: 30vh !important;
}
}

 

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

Link to comment

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.