How to edit embed filter for youtube video to allow responsive full width layout

Thanks to Serkan’s suggestion I was pointed in the right direction to search for editing the wrapper rather than filtering the video itself (even though I would have loved a “filter only” solution.) Nonetheless, I stumbled upon a easy solution here – https://millionclues.com/wordpress-tips/fullwidth-responsive-youtube-embeds/

I hope this can assist someone else with the same issue 🙂

Filter:

add_filter( 'embed_oembed_html', 'wrap_embed_with_div', 10, 3 );

function wrap_embed_with_div( $html ) {
    return '<div class="hbps-responsive-video">' . $html . '</div>';
}

CSS:

.hbps-responsive-video { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

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

tech