html - Bootstrap ，卡+视频不适合手机屏幕

Question

我正在使用以下代码将视频放到网站上，但是在垂直方向上，手机屏幕上只能看到视频的左半部分
我不是网络开发人员。有人可以告诉我确切的内容吗，如何使其正确放置在手机屏幕上？
是在youtube iframe链接中还是在 bootstrap 中？

<section class="dark-grey-text text-center">
  
  <!-- Section heading -->
  <h3 class="font-weight-bold mb-4 pb-2">Test</h3>
  <!-- Section description -->
  <p class="grey-text w-responsive mx-auto mb-5">Custom</p>

  <!-- Grid row -->
  <div class="row">

    <!-- Grid column -->
    <div class="col-lg-100 col-md-12 mb-4">
      <!-- Card -->
      <div class="card card-cascade wider card-ecommerce">
        <!-- Card image -->
        <div class="view view-cascade overlay">
          <iframe width="640" height="480" src="https://www.youtube.com/embed/*******?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <!-- Card image -->
        <!-- Card content -->
        <div class="card-body card-body-cascade text-center pb-0">
          <!-- Title -->
          <h5 class="card-title">
            <strong>
              <a href="">Software</a>
            </strong>
          </h5>
          <!-- Description -->
          <p class="card-text">Inquire </p>
          <!-- Card footer -->
          <div class="card-footer mt-4">
            <p class="float-left font-weight-bold mb-1 pb-2">10</p>
            <a class="float-right material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
              <i class="fas fa-heart grey-text ml-3"></i>
            </a>
            <a class="float-right material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Quick Look">
              <i class="fas fa-eye grey-text ml-3"></i>
            </a>
          </div>
        </div>
        <!-- Card content -->
      </div>
      <!-- Card -->
    </div>
    <!-- Grid column -->

我尝试将其放入style.css，但没有发现任何差异

.iframeVideo {
    height: 0px;
    padding-top: 25px;
    padding-bottom: 56.2%;
    position: relative;
}
.iframeVideo iframe {
    width: 1%;
    height: 100%;
    position: absolute;
}

Answer 1

如果您使用的是自举程序，请参阅此以获取自适应视频嵌入。
https://getbootstrap.com/docs/4.5/utilities/embed/