making youtube video responsive

[Gary Pfeffer]

Hi. In live composer I put a video on the top of my blog entry using this code:

It doesn’t get smaller on small screens, obviously. How can I make it resize to smaller screens, and still look like it does right now in regular desktop browsers?

The page is: https://www.garypfeffer.net/let-me-share-my-new-project-432-hz-tuned-sound-healing/

Thanks

Attachments:

You must be logged in to view attached files.

[Bidur]

Hello Gary,

Please add the following css inside the additional css section of your customizer and let us know;

iframe {
    max-width: 100%;
}

Thanks!
Bidur

[Gary Pfeffer]

When you say, the customizer, I am not sure where you mean.

[Gary Pfeffer]

I tried this in Appearance, Customize. It centered the video on the page on the iphone, but it did not adjust the width or height.

[Gary Pfeffer]

Here is the code that I have in the html/shortcode box….

I know that the width and height are restrictive. But, if I try to use 100% for width, it doesn’t alter the height. And, if I specify a height of 100% nothing happens. It is as if I typed nothing. It isn’t honoring the % symbol in the height tag.

• This reply was modified 4 years, 6 months ago by Gary Pfeffer.

[Bidur]

Hello Gary,

Yes inside Appearance>>Customize>>Additional css, please add the following css so that that you can adjust the height manually in mobile devices;

@media screen and (max-width: 460px){
    iframe {
        max-width: 100%;
        height: 227px;
    }
}

You may change the height value of your own.
Hope it works for you.

Thanks!

[Author]

Posts