Embedded Youtube video size problem

Here is the code I’m using-

<div class=”video-container”><iframe src=”https://www.youtube.com/embed/DuoJjWv3Ndk?rel=0&enablejsapi=1&#8243; width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

Thanks.

Is this video-container in a template?
Are you running WordPress 4.4.1?
…and a link to your site where the video is would help.

Hi,
I am running WordPress 4.4.1. I noticed the change after a theme update.

Sorry, tried to post a link

https://www.foodpantrysolutions.com/view-video

I’m using the Full Width Page template.

So… you are putting this “video-container” in your page to contain the video, when you may not have to. Try this: WordPress Codex : Embeds.
You can use the shortcode option to size the video.

Another option is to use this plugin: Fluid Video Embeds and set the position option to “center”.

Hi,
Thanks for that info. I used the container because I have set up video tracking in Google Tag Manager. It requires that I add “enablejsapi=1” to the Youtube URL. I tested using the example in https://codex.www.ads-software.com/Embeds but it did not allow the extra code for Google Tag Manager.

I’ll take a look at https://www.ads-software.com/plugins/fluid-video-embeds/

Thank you!

Perhaps using this plugin would simplify your use of Google Tag Manager:
DuracellTomi’s Google Tag Manager for WordPress

Unfortunately, neither of those options work for me. My video used to display correctly, based on the width and height specified in my code. Now, it displays across the full screen no matter what settings I use. And I really want to keep the Video tracking functionality, so I need to keep “enablejsapi=1”

Any other solutions? Any help is appreciated!

Keep this:

<div class="video-container"><iframe src="https://www.youtube.com/embed/DuoJjWv3Ndk?rel=0&enablejsapi=1" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Then install a Custom CSS plugin and put in this code:

.video-container {
display: block;
margin: 1rem auto;
width: ??px;
height: auto;
}

.video-container iframe,
.video-container embed {
width: 100% !important;
height: auto !important;
}

Replace the “??” with the width you want.
If the height: auto; is not working properly, then replace the “auto” with the height plus “px” behind the numbers.
This should center inside the page and retain the width/height you want.

Hi,
Thank you for that css. I tried several modifications to get the size right. I ended up with this:

.video-container {
display: block;
margin: 1rem auto;
width: 560px;
height: 315px;
}

.video-container iframe,
.video-container embed {
width: 100% !important;
height: 100% !important;
}

When I changed auto to 100%, it is no longer responsive. But if I use height: auto !important;, the video looks too small and narrow.

Getting closer!

So I went to youtube to look at the video you are embedding and its size is different than the “box” you are trying to put it in, therefore it will distort.

<iframe width="420" height="315" src="https://www.youtube.com/embed/DuoJjWv3Ndk" frameborder="0" allowfullscreen></iframe>

Here’s what I’m using and the video is too small and narrow:

On View Video page:
<div class=”video-container”><iframe src=”https://www.youtube.com/embed/DuoJjWv3Ndk?rel=0&enablejsapi=1&#8243; width=”420″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></div>

Custom css:
.video-container {
display: block;
margin: 1rem auto;
width: 420px;
height: auto;
}

.video-container iframe,
.video-container embed {
width: 100% !important;
height: auto !important;
}

You are trying to create a box that you can put a tracking code in, but videos are multiple different sizes and fitting an embed code or iframe code into a responsive box is difficult at best (…I know, becasue I’ve tried).
If the tracking code is so important, then you should read these two posts on the GTM and videos before going further:
YouTube Video Tracking with Google Tag Manager (V2) and Universal Analytics: A Step-by-Step Guide
and
YouTube video tracking via Google Tag Manager

I’ll read more about it.
Thanks for all of your help!