Embedded YouTube Videos Are Huge

When I viewed your post with the video, your video is the width of the post content. So far it looks normal to me, but is it much larger for you? What size were you wanting it to be?

Thank you for responding. I think 560×349 should play the video without the black bars. I believe it is 1140×672 in the post which is way too large and is the reason there are black bars on the top and bottom. I don’t want to mess with the style sheet if I don’t have to because I don’t have a child theme set up.

Your video is loading in with an iframe, which has these attributes:

<iframe class=”youtube-player” type=”text/html” width=”1140″ height=”672″

Because this theme is responsive, for that video iframe to fit in the container of the post, it shrinks by width (maintaining aspect ratio) down to fit the 737px width.

How are you inserting the video, are you using a plugin or using code from another source, or using this:

https://codex.www.ads-software.com/Embeds

Using iframes can often cause issues.

From my understanding YouTube videos need to load with an iframe. I am not using anything to embed the video. In a wordpress post all you have to do is click ‘add media’ –> ‘insert from URL’. The video is automatically inserted into the post. I have tried several codes to try and make the videos smaller, including the one from the link above. None of them have affected the size of the video no matter what height or width or code I use. The videos are oversized on mobile, tablet and my desktop( with huge black bars on the top and bottom).
In my previous theme once the video was embedded into the post I was able to resize it just like you can with an image. Now there is no option to resize. I wasn’t sure if wordpress dropped the feature recently or it was this theme.
In the following post I added two videos side-by-side. When I wrote the post I was using a different theme. So far the videos seem to be working fine next to each other (I have had to re add several videos to posts because they weren’t showing up after I changed to this theme). I even tried to use the code in this post, too, but again it hasn’t affected the size of any of the videos I have tried to add it to.

https://nuttahawenasa.com/ride-the-wind-day/212

Hmmm….not sure what to suggest to get rid of the top and bottom spaces. The video will load in its aspect ratio and by width of the container it sits in. So the frame will be responsive to the space available.

The theme does not include any special video embed styling, other than standard responsive sizing:

embed, iframe, object, video {
    margin-bottom: 1.6em;
    max-width: 100%;
    vertical-align: middle;
}

Perhaps this might help https://wistia.com/blog/remove-black-bars-from-online-video

https://stackoverflow.com/questions/19794000/removing-black-borders-on-a-vimeo-iframe-embed-using-css

There’s a lot of google results that show up in relation to this. You can do a Google search with keyword search something like “wordpress remove top bottom dark areas on videos”

Thank you for all your help. I finally found a code that works:

[youtube https://www.youtube.com/watch?v=rSECCBLdeEU&w=600&h=360 ]

I found the code here: https://en.support.wordpress.com/videos/youtube/
I am still trying to fine tune the width and height but the code worked perfectly.
Thank you so much for helping me. You are always quick to answer questions and really work at trying to solve problems. I appreciate the time and energy spent in helping me and others.

You’re very welcome!
What is important, is that you have it working ??

Is it safe to say this topic can be set as “Resolved?”

Yes. It’s resolved. Thank you ??