YouTube video sizing not working?

Hello,

I’m not sure if this question relates to AMP project or to this plugin.

When I follow these instructions to set up YouTube
https://ampbyexample.com/components/amp-youtube/
https://www.ampproject.org/docs/guides/iframes

The video shows up at 100% width and it is HUGE (on the amp version of the page). I want the video to take the size defined in the AMP code.

I started modifying amp css but realized that is not allowed. But honestly, I can’t tell where the styling is coming from. Is it in the plugin by any chance?

I’m using your AMP text module in the AMP above the loop widget area (probably an important point to mention), and inserted this:

<amp-youtube width="480"
height="270"
  layout="responsive"
  data-videoid="lBTCB7yLs8Y">
</amp-youtube>

But the video shows up way, way, way bigger. Even if I could get the image to shrink, the spacing around it will not.

This is where I got so far to partially fix things…but it’s far from complete:

.amp-iframe, .amp-youtube, .amp-instagram, .amp-vine {
    background: #fff; 
    margin: 0px;
}

.i-amphtml-fill-content {
    display: block;
    width: auto;
    min-width: inherit;
    height: auto;
    min-height: inherit;
    margin: auto;
    padding:0;
}

You can see that on the AMP example page, the video does not do this at all: https://ampbyexample.com/components/amp-youtube/

So I’m wondering if it has to do with this plugin’s settings or styles?

I really tried to look but couldn’t figure it out. It’s either element styles, index style or amp.css styles that I could find. Or inline styles in the HTML, which seems to be from the AMP YouTube tag.

• This topic was modified 6 years, 10 months ago by joycegrace.