Modify YouTube Embed Code to fit theme

Question

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.com/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.com/embed/2jna3dWEnzo" allowfullscreen></iframe>

Any help would be fab!

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.com/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.com/fluid-width-video/