[Resolved] Embeding youtube video into post – Video's Height is not responsive

[Musa Ahmad]

Hi there,

I’m using generatepress theme.

I have embed youtube video into my post, and it working correctly. But when I scale the browser to be smaller, the heights of the video don’t resize like a width.

I mean the width of the video is responsive but the height of the video is not responsive. and there is extra black padding on the top and on the bottom of the video while playing the video.

Check this problem on my blog: http://www.musaahmad.com/kepentingan-akaun-google-dalam-perniagaan-online/

Please help me.

[Webmaster]

This dude talks about the EXACT thing your talking about —
Making Embedded YouTube Videos Responsive – Responsive Web Design

[Musa Ahmad]

Any easiest way to solve this problem?
I watched the tutorial that you gave me, but that’s mean that I have to add:
<div class="video-container></div> to each of my embeded video.

[Webmaster]

Look for some J$ on the web using the wrap() method. If you only use <iframe> for YouTube Embeds, than consider wrapping all <iframe> with <div class="video-container">

[Tom]

I’m afraid the only way to make responsive videos is to wrap them in that div.

There’s more info on some of the solutions here: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Adrian]

Other option if you don’t want use jQuery to add the container is put de next code in the functions.php:

add_filter( 'embed_oembed_html', 'arj_oembed_filter', 10, 4 ) ;
function arj_oembed_filter($html, $url, $attr, $post_ID) {
    if( is_singular( 'post' ) ){
        if ( strstr( $html,'youtube.com/embed/' ) ) {
            $return = '<div class="video-container">'.$html.'</div>';
            return $return;
        }
    }
}

[Paul]

You could always use a plugin such as ARVE Advanced Responsive Video Embedder.

Once installed and activated you don’t need to do anything except paste the video URL. I’ve used it with YouTube, Vimeo, and Facebook videos.

I don’t know how difficult it would be to integrate something like that into a future version of GP, but with so many people now using video it feels like a must have feature.

My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

[Leo]

This might also help: https://docs.generatepress.com/article/responsive-videos/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts