如何让 YouTube 缩略图的纵横比为 21:9

Question

<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
  <div class="column row">
    <div class="m-modal-video__column m-modal-video__column--primary">
     <div class="m-modal-video m-modal-video--primary-full-width">
      <div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
        <p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
      </div>
    </div>
  </div>
  <div class="m-modal-video__column m-modal-video__column--secondary">
    <div class="m-modal-video m-modal-video--primary-full-width">
      <div class="m-cta__vcenter">
        <div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
          <a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
            <div class="m-modal-video__overlay m-modal-video__overlay--triangle">
              <div class="m-modal-video m-modal-video__triangle"></div>
            </div></a>
          </div>
          <div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
            <div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
            <button class="close-button" data-close aria-label="Close modal" type="button">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>  
        </div>
      </div>
    </div>
  </div>
</div>

我的网站上有一个模式，并使用以下内容显示缩略图：

http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg

问题是视频的纵横比为 21:9。我使用了以下样式，但图像的顶部和底部仍然出现黑色信箱。有没有办法只显示 YouTube 缩略图而不显示黑色信箱？

&__container {
    position: relative;
    height: 0;
    padding-bottom: 42.85714%;
    overflow: hidden;
    margin-bottom: 1rem;
    a img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

Answer 1

我已经修改了您的示例代码以添加两个新的 CSS 规则来对应 class 您的 HTML 已经没有样式：

.m-modal-video__container--cinemascope 使用您之前尝试过的 padding-bottom 技巧定义您的宽银幕比例图像周围的容器。

.m-modal-video__container--cinemascope img 定义图像在上述容器内的大小和位置。知道您希望此图像保持其纵横比而不拉伸，我删除了 height: 100% 规则（因此高度会自动计算）并使用 top: 50% 和 [=17= 使图像垂直居中] 技巧。

这一切都是必需的，因为 YouTube 仍然为您的视频制作了一个 16:9 JPG 缩略图，尽管它的比例是 21:9，所以我们实际上是在使用这个技巧来隐藏图像中的黑条。我仍然看到有细小的条子刺穿，但如果您担心的话，您可以稍微调整 padding-bottom 比率，或者将 img 的 width 增加到超过 100%。

.m-modal-video__container--cinemascope {
  position: relative;
  height: 0;
  padding-bottom: 42.85714%;
  overflow: hidden;
}

.m-modal-video__container--cinemascope img {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
  <div class="column row">
    <div class="m-modal-video__column m-modal-video__column--secondary">
      <div class="m-modal-video m-modal-video--primary-full-width">
        <div class="m-cta__vcenter">
          <div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
            <a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
              <div class="m-modal-video__overlay m-modal-video__overlay--triangle">
                <div class="m-modal-video m-modal-video__triangle"></div>
              </div>
            </a>
          </div>
          <div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
            <div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
            <button class="close-button" data-close aria-label="Close modal" type="button">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何让 YouTube 缩略图的纵横比为 21:9

How to get YouTube thumbnail image aspect ratio to be 21:9

youtube

sass

bem