For make Video EMBED in responsive mode i need to add a div before iframe like:

<div class="videoWrapper">
    <iframe width="600" height="338" src="https://www.youtube.com/embed/f5CcOq8UzkI?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

But when add with [embed width="" height=""]https://www.youtube.com/watch?v=/f5CcOq8UzkI[/embed]

the result is:

<p><iframe src="https://www.youtube.com/embed/XXXX?feature=oembed" allowfullscreen="" height="113" frameborder="0" width="200"></iframe></p>

Now i have tried with:

function Oembed_youtube_no_title($html,$url,$args){
    $url_string = parse_url($url, PHP_URL_QUERY);
    parse_str($url_string, $id);
    if (isset($id['v'])) {
        return '<div class="embed-container"><iframe width="'.$args['width'].'" height="'.$args['height'].'" src="http://www.youtube.com/embed/'.$id['v'].'?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>';
    return $html;

but the result is always iframe, how to change the embed tag and add a div element? And why WordPress not suppor responsive Video?


you can use 'embed_oembed_html' to wrap that iframe inside the div.

add_filter('embed_oembed_html', 'Oembed_youtube_no_title', 99, 4);

function Oembed_youtube_no_title($html, $url, $attr, $post_id) {
  return '<div class="embed-container">' . $html . '</div>';

Didn't test please let me know if it works for you.

  • And with that you can add some CSS to make - for example - the embedded video responsive: ` .embed-container { overflow: hidden; position: relative; max-width: 100%; height: auto; padding-bottom: 56.25%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }` Jan 25 '20 at 11:46

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.