Jump to content

what code do I need to resize a youtube video for mobile view?

Recommended Posts

Site URL: http://regenhealth.nz/regenerative-health

Hi there,

I have used the code option to embed a youtube video on my site. It looks good on desktop but in mobile view it's too wide.

I have tried editing the code on the page using...    @media only screen and (max-width: 640px)     ...before the youtube video code which is... {<iframe width="560" height="315" src="https://www.youtube.com/embed/68NUOi09ae8?rel=0&autoplay=1&modestbranding=1” title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> }

but it just shows up as text before the code.

I've also tried adding code under Design  - Custom CSS  but it shows as a syntax error. 

I'd love some help to correct this. Please tell me if the code I'm using is correct and where I should apply it? On the page or under Design?

Thanks

Link to comment
  • Replies 1
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

On 4/8/2022 at 11:13 PM, RIR said:

Site URL: http://regenhealth.nz/regenerative-health

Hi there,

I have used the code option to embed a youtube video on my site. It looks good on desktop but in mobile view it's too wide.

I have tried editing the code on the page using...    @media only screen and (max-width: 640px)     ...before the youtube video code which is... {<iframe width="560" height="315" src="https://www.youtube.com/embed/68NUOi09ae8?rel=0&autoplay=1&modestbranding=1” title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> }

but it just shows up as text before the code.

I've also tried adding code under Design  - Custom CSS  but it shows as a syntax error. 

I'd love some help to correct this. Please tell me if the code I'm using is correct and where I should apply it? On the page or under Design?

Thanks

Add to Design > Custom CSS

/* Mobile Youtube */
@media screen and (max-width:767px) {
iframe[src*="youtube"] {
    width: 100% !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

Create an account or sign in to comment

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

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