How to Make Embedded YouTube Videos Responsive on Genesis?

[dedsonus]

Hello,
i'd like to add a div around embed youtube codes by default to make all videos responsive. I have hundreds of videos on my blog so i'd like to make it using functions.php not by manually adding code to each video.

What i want to do:

<div class="video-container">
        <iframe src="https://www.youtube.com/embed/rFyfFHXsofk" width="800" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

I'm using this CSS code:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

I've tried two different codes in functions.php but none of them seem to be working.

Here is the first one:

/*  Add responsive container to embeds
/* ------------------------------------ */ 
function alx_embed_html( $html ) {
    return '<div class="video-container">' . $html . '</div>';
}
 
add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

Here is the second:

add_filter( 'embed_oembed_html', 'custom_oembed_filter', 10, 4 ) ;

function custom_oembed_filter($html, $url, $attr, $post_ID) {
    $return = '<div class="video-container">'.$html.'</div>';
    return $return;
}

I'm using Eleven40 Pro theme.
Is there any way to make it working? Thank you.

[Victor Font]

The problem is that you are using iframes. Resizing iframes is difficult to say the least. This might provide some insight into resizing iframes with CSS: https://benmarshall.me/responsive-iframes/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[dedsonus]

Thank you, Victor!
I'll try this solution.
Regards,
Mike

[Author]

Posts