admin管理员组

文章数量:1387437

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
Share Improve this question asked Apr 14, 2020 at 10:38 MikeMike 233 bronze badges 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
Add a comment  | 

1 Answer 1

Reset to default 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/

本文标签： twitter bootstrapModify YouTube Embed Code to fit theme

版权声明：本文标题：twitter bootstrap - Modify YouTube Embed Code to fit theme 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744568943a2613223.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。