Angular youtube-player 视频大小溢出 div

Question

我正在为 Angular 中的一个项目使用 youtube-player api，问题是视频比父 div 更宽，我必须设置宽度选项中的和高度以使其在 div 中正确显示，但是当我从更大或更小的屏幕上看到页面时，视频变得比 div 更小或更大，例如，如果我看到我手机的页面，视频比 div 大，我用的是 Bootsrap 5 的水平卡片，所以我设置视频以 col-4 显示，而卡片主体以 col 显示-8。从我的显示器上看是这样的

这在 Ipad 空气中看起来很热

这在手机里看起来很热

如您所见，视频在我的显示器中显示正确，但宽度不同时视频变小或变大，这是我的代码：

HTML

<div class="col-lg-11" *ngFor="let video of videos | slice:1:5">
      <div class="card h-100" >
        <div class="row h-100">
          <div class="col-4 col-lg-4 pe-0">
            <youtube-player class="rounded-start d-flex"
                videoId= {{video.videoId}}
                suggestedQuality="default"
                [height]="105"
                [width]="160" >
            </youtube-player>
          </div>
          <div class="col-8 col-lg-8">
            <div class="card-body pe-0 pe-lg-auto">
              <h4 class="card-title">{{video.titulo}}</h4>
              <p class="card-text"><small class="text-muted">{{video.descripcion}}</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>

如何才能使视频正确显示？这是 stackblitz 中的一个活生生的例子 https://stackblitz.com/edit/angular12-bootstrap-3macyu?file=src/app/app.component.html

Answer 1

好的，经过更多的研究，我找到了一个解决方案，虽然不是最好的，但至少 youtube 视频没有溢出 div，所以我是这样做的：

首先，因为我正在使用 YouTube-Player 库，所以我必须在我的 html 中使用 youtube-player 标签，这会生成一个 iframe 加载页面以显示视频，所以这是我在全局 CSS

中输入的内容

div > youtube-player > iframe {
  display: block;
  width: 100%;
}

因此 youtube-player 占用了 div 的宽度，所以现在我不必在 youtube-player 选项中指定宽度，只需指定我想要的高度。

<youtube-player
              class="rounded-start d-flex"
              videoId="{{ video.videoId }}"
              suggestedQuality="default"
              [height]="90"
              [width]="">
            </youtube-player>

因此，对于我的横向卡片，我发现 height: 90 足以显示顶部和底部没有黑条的视频，并且如果调整页面大小或从其他设备上看到它会显示黑条取决于屏幕宽度，但还不错，因为视频仍然可见。

如果有人想检查它并调整高度并调整 window 的大小，我会用它更新我的 stackblitz 代码。 https://stackblitz.com/edit/angular12-bootstrap-3macyu?file=src/app/app.component.html

*我也不知道为什么有的视频下面有白色space但是我的项目里面没有白色spaces

编辑：白色的 space 是因为标题太长，占用了更多 space 所以卡片更长，只需“打破”文本以仅显示 1 行文本：

.card-title{
    overflow: hidden;
}

.break-videoTitle {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

Angular youtube-player 视频大小溢出 div

Angular youtube-player video sizing overflows div

html

css

youtube-api

angular