Responsive YouTube Videos on Blog

[ASTI]

Hello!

I have been trying for a while now to try and get YouTube videos to become responsive on my blog. As you can see on my other pages (asti.com/manufacturing), the videos justify just fine as the screen decreases. However, on my blog, you can see that the width of the video decreases, but the height doesn’t adjust with it. I believe the problem is that the embedded videos always try to justify at 100% width, so when I size them down to around 60%, it creates all the black space around the YouTube videos because the height isn’t adjusting with it.

Is there a way that I can fix it so that the videos are responsive to changes in viewport?

I will add my credentials below as well as a link to an example.

Thanks in advance!

[Prasant]

Hello @ASTI,

Thanks for asking.

On my end your website is loading something like this https://cloudup.com/ckw8xqyN3fi. I can see issues with the YouTube videos. Can you please try adding following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .entry-content iframe{width: 100% !important;}
}

Upon adding the code, videos should look something link this https://cloudup.com/cSY_hI8gyMZ

Let us know how it goes.

Thanks.

[ASTI]

This worked very well. After adding some additional selectors and stylings, I think I have it looking about as best as it can be. Your help, as well as the rest of your teams help, is always incredibly appreciated.

Thank you so much!

[basanta]

You are most welcome!

Thanks