Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Youtube Video Too Big

Home Forums Support Youtube Video Too Big

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #157552
    Jam

    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

    #157561
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #157943
    Jam

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

    #158006
    Tom
    Lead Developer
    Lead Developer

    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>
    #158152
    Jam

    Thanks so much Tom. Off to try that now.

    #158153
    Jam

    Just did it. Works like magic.. a hundred thank yous — 🙂

    #158206
    Tom
    Lead Developer
    Lead Developer
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.