The popular fix for responsive video embeds does not work!

To begin with, on the page that you’ve linked, your YouTube iframe isn’t wrapped inside your .video-container. That div wrapper isn’t even there; see this screenshot. You can view source of your page to check.

After you’ve fixed that, we can move to the CSS.

Hi Pixel,

Thanks for the reply.

andrewnewey.com/news is set as the ‘posts page’ (WP Admin > Settings > Reading). Anything I insert directly onto that page, visual or text, does not display on the site. Only content in ‘Posts’ will be displayed. Make sense?

I will upload an image to the post above the video iframe so that you you see that the post/news section is actually responsive.

What I was trying to tell you is that the HTML that you show here and the HTML on your site aren’t the same.

On here, you said you have this:

<div class="video-container">
<iframe src="https://www.youtube.com/embed/..........." frameborder="0" width="560" height="315"></iframe>
</div>

On your site, you have this:

<p>
<iframe src="https://www.youtube.com/embed/SnLvZBWH-Jc?rel=0&showinfo=0" height="480" width="853" allowfullscreen="" frameborder="0"></iframe>
</p>

Completely different. On your site, the <div class=”video-container”> part isn’t there at all.

Doh. Sorry – because it was not working I went back to using the iframe code until I found a fix!

It’s back again now. Where should I be inserting the CSS in my stylesheet?

Cheers

Give this a try. I based it off your original CSS codes that you provided in your first post.

Put it in your custom CSS area or child-theme CSS file:

/* ==========================================================================
   Responsive video embeds
   ========================================================================== */

/*
 * embed object wrapper
 */

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

/*
 * embed iframe object
 */

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
 * make sure elements don't extend over wrapper
 */

.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
   max-width: 100%;
}

/* ==========================================================================
   Responsive fixes
   ========================================================================== */

/*
 * Styles in this area will only apply from 751px and up
 */

@media screen and (min-width: 751px) {

	/*
	 * Change post area width to fluid
	 */

	#content {
		width: 68%;
		padding: 1.5em 0 3.5em 0;
	}

	/*
	 * Change widget area width to fluid
	 */ 

	.primary {
		width: 28%;
	}
}

Many thanks! Where about in the child them CSS file?

Done!

Thanks very much ThePixelMe! You’re a star!

Andrew