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

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

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