Site logo

Archived topic

Youtube Video Too Big

6 replies · Started by Jam on December 2, 2015

Viewing posts 1–7 of 7

Hi Tom

I'm having problems with the Youtube embed. It's too big (more long than wide) on the page. When I change the theme to the wordpress 2015 theme, this doesn't happen so I'm thinking it is a GeneratePress problem. I have also tried to install the responsive column widgets theme but that doesn't make it it any better.

Thanks a lot

Hi there,

GP tells WordPress the width of your content area so the auto embed of galleries, videos etc.. will fill the area.

To avoid this, simply choose your own video size when getting the embed code from YouTube - this will guarantee the video is the exact size you need it to be.

Let me know if you need more info :)

Hey Tom
thanks a lot for the very quick reply. Just one more quick question. Will the video be responsive this way? Cheers

You'll need to add this CSS:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Then wrap your video in the videoWrapper class:

<div class="videoWrapper">
    <iframe src="youtube..." />
</div>

Thanks so much Tom. Off to try that now.

Just did it. Works like magic.. a hundred thank yous -- :-)

You're welcome :)

This archived topic is closed to new replies.