0

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!

1
  • 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

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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