0

Im trying to edit the suggested embed filter from wordpress.org to make youtube videos always stay 100% width inside its container div, while keeping the appropriate height dimension as needed. Is this possible?

https://codex.wordpress.org/Plugin_API/Filter_Reference/embed_defaults#Examples

add_filter( 'embed_defaults', 'modify_embed_defaults' );
function modify_embed_defaults() {
    return array(
        'width'  => 750, 
        'height' => 375
    );
}

I initially went ahead and tested out the filter by simply editing the width and height dimensions to fit the wrapper div on my post content, however its virtually impossible to know the necessary height dimension of the video each time since that can vary... in addition, when viewing the post content with embedded videos utilizing this method, the video does not scale appropriately for smaller screens.

Is there a non-plugin solution to this? I was hoping to be able to just add a filter to my child themes functions.php

Thanks, Shaun

  • Check this answer wordpress.stackexchange.com/a/254586/23042 – Serkan Algur Aug 11 '18 at 19:16
  • Thank you, but Im not looking to add a wrapper, unless by doing so, the same result could be achieved via CSS. - Is this possible? – Mr.Brown Aug 12 '18 at 20:38
  • 1
    Thanks for commenting Serkan, you ended up pointing me in the right direction. I will post my solution. – Mr.Brown Aug 12 '18 at 21:28
1

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%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.