Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Video resize in header when converting to mobile view


Recommended Posts

Site URL: https://www.danirvin.com/

pw: danspeaks7467

I have an autoplay video in my header that is not resizing when I view it in mobile view here on SquareSpace. Additionally, it is not showing at all on my iOS device and have been testing a backup image, but would prefer the resized video to be autoplaying.

Thanks in advance for any help/suggestions/support! :)

Dan

 

Attachments:

Screenshots from web view and mobile view

Screen Shot 2020-07-28 at 6.22.00 PM.png

Screen Shot 2020-07-28 at 6.22.25 PM.png

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > design > Custom CSS

/* resize video banner mobile */
@media screen and (max-width:767px) {
.homepage #page section:first-child iframe {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 30vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 7 months later...
  • 2 weeks later...
On 3/16/2021 at 11:23 PM, canlooo said:

I'm having the same problem as well and unfortunately the CSS provided above did not work for me. Would be appreciated if there is other solution available. Thanks in advance 🙂

Each site needs a different code. Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

I'm having the same issue with one of my webpages: https://zandragrace.squarespace.com/designwork/astera . Is there also a way to have youtube videos autoplay that doesn't involve having them be background imgs/videos? 

Link to comment
  • 1 month later...
1 hour ago, CQURE said:

Add to Design > Custom CSS

/* resize video banner mobile */
@media screen and (max-width:767px) {
[data-section-id="6059a0f56efca41413e29ba3"] iframe {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="6059a0f56efca41413e29ba3"] {
    min-height: 20vh !important;
    height: 30vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
15 hours ago, tuanphan said:

Add to Design > Custom CSS


/* resize video banner mobile */
@media screen and (max-width:767px) {
[data-section-id="6059a0f56efca41413e29ba3"] iframe {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
[data-section-id="6059a0f56efca41413e29ba3"] {
    min-height: 20vh !important;
    height: 30vh !important;
}
}

 

thanks @tuanphan     

 height: 50vh !important;

nice!!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...