Bootstrap、卡片+视频不适合手机屏幕答案

【问题标题】：Bootstrap, Card + video not fitting on mobile phone screenBootstrap、卡片+视频不适合手机屏幕
【发布时间】：2020-11-29 16:43:46
【问题描述】：

我正在使用以下代码将视频放在网站上，但是垂直时手机屏幕上只能看到视频的左半部分

我不是网络开发人员。有人可以准确地告诉我缺少什么以及如何使其正确适合手机屏幕吗？

是在 youtube iframe 链接中还是在引导程序中？

<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;
}

【问题讨论】：

标签： html iframe youtube

【解决方案1】：

如果您使用的是引导程序，请参阅此内容以了解响应式视频嵌入。 https://getbootstrap.com/docs/4.5/utilities/embed/

【讨论】：

【解决方案2】：

通过添加到 iframe 修复：

<div class="card card-cascade wider card-ecommerce">
            <!-- Card image -->
            <div class="view view-cascade overlay embed-responsive embed-responsive-4by3">
              <iframe class="embed-responsive-item" width="640" height="480"  ...

【讨论】：