I'm using a custom bootstrap template and other users will be embedding youtube videos, which I want to be responsive to fit the theme.

What can I do to make the normal YouTube embed code, something like this:

<iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Into this formatting (simplified and with class added):

  <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>

Any help would be fab!

I'm using a custom bootstrap template and other users will be embedding youtube videos, which I want to be responsive to fit the theme.

What can I do to make the normal YouTube embed code, something like this:

<iframe width="560" height="315" src="https://www.youtube/embed/2jna3dWEnzo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Into this formatting (simplified and with class added):

  <iframe class="embed-responsive-item" src="https://www.youtube/embed/2jna3dWEnzo" allowfullscreen></iframe>

Any help would be fab!

• twitter-bootstrap
• embed
• responsive
• youtube

• Making the iframe responsive can be done using CSS, you don't need to change the markup of the embed code – Tom J Nowell ♦ Commented Apr 14, 2020 at 10:54

1 Answer 1

If you're using the block editor, the fix is simple:

add_theme_support( 'responsive-embeds' );

You can also make the iframe responsive using pure CSS, just wrap it in a div:

<div class="yt-container">
https://www.youtube/watch?v=2jna3dWEnzo
</div>

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

This article covers making embeds responsive using CSS and JS:

https://css-tricks/fluid-width-video/