嵌入视频时出现Angular 6和自举的怪异行为

Question

我正在尝试将YouTube视频嵌入我的角度应用程序中。在视频组件中，下面是我的视频及其描述。

当前情况

我在.col-12引导类中调用的视频组件。它没有占用父.col-12类的整个宽度。

但是当我将类embed-responsive embed-responsive-16by9添加到video-component时，它确实占用了容器的全部宽度并隐藏了描述。

我不明白为什么不添加课程。

角度6

bootstrap 4.1

<div class="row" id="row1">
    <div class="col-12">
        <app-video></app-video>
     </div>
 </div>

video.component.js

<div class="video-component">

  <!-- <div className="video video-detail "> -->

  <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/I317BhehZKM" allowfullscreen frameborder="0" allow="autoplay; encrypted-media">
    </iframe>
  </div>

  <!-- </div> -->

  <div class="video-content">
    <h2 class="heading04">What impact will you make?</h2>
    <p>Oaskdfjl.</p>
    <a class="link" href="">see more exicting videos</a>
  </div>
</div>