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!

  • Making the iframe responsive can be done using CSS, you don't need to change the markup of the embed code – Tom J Nowell Apr 14 at 10:54
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/

| improve this answer | |

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.