Twenty Fourteen and Instagram embed

Extra blank lines … where? In the post content of the edit page, in the display of the page, on the front page?

Sorry, I may have not explained it correctly but there is a large gap between the Instagram and where the text should start.

Can you provide an image or a link to demonstrate? From the sound of it it could just be padding/margin but no clear way of telling.

Can’t seem to see a way to upload an image here. So I’ve put the image in this tweet https://twitter.com/patrickphotosuk/status/408496382748553216

I’m running 3.8 on a localhost rather than my live blog which is displaying fine using Twenty Thirteen.

Hi Patrick,
Do you have any plugins installed? Can you test with them all deactivated?

I’ve deactivated all the plugins and it is still displaying the text with the space after the Instagram. When I view the source for the page in Twenty Fourteen it says this:

</header><!-- .entry-header -->

		<div class="entry-content">
		<p><iframe src="//instagram.com/p/gi8h1SPLDg/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
Today is the first day of the

And when I look at the source for the page on my live site using Twenty Thirteen it says this:

</header><!-- .entry-header -->

		<div class="entry-content">
		<p><iframe src="//instagram.com/p/gi8h1SPLDg/embed/" height="710" width="612" frameborder="0" scrolling="no"></iframe>
Today is the first day of the

There is a small difference between the two. Is this what is causing the problem?

Since you didn’t use code tags, there’s no difference to us… or rather, anything that was different got eaten.

Can you repost those examples with code tags? They’re backticks (or press the CODE button on the toolbar above the text entry box).

The small difference is that the embed code you cut and paste from Instagram has allowtransparency=”true” now in it. I don’t think that was in there a few weeks ago for the version I’m using in Twenty Thirteen. But removing this still makes no difference to what is happening in Twenty Fourteen.

Thanks to all who are helping out with this.

I think I found the issue, though with a “live” embed I can’t repeat it.

Will push in a CSS fix to Twenty Fourteen in trunk today, and you can please confirm it’s working after that.

Nope, I was wrong. ??

But, if you really want to fix this in your version of the theme, you can apply some CSS like:

p > iframe {
  max-width: none;
}

We can’t apply it in the core theme since it’d break many other things.

What’s happening is the Instagram embed has a hard-coded height, so if you apply max-width: 100% it’ll make the width be the correct value for the image, but not the iframe height itself, leaving a gap.

Lance, thanks again for all your time and effort into this. It is much appreciated.