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规则来对应您的HTML已经没有样式的类：

.m-modal-video__container--cinemascope使用您先前尝试实现的padding-bottom技巧在您的电影院比例图像周围定义了容器。

.m-modal-video__container--cinemascope img定义上述容器内图像的大小和位置。知道您要此图像保持其长宽比而不拉伸时，我删除了height: 100%规则（因此会自动计算高度），并使用top: 50%和{{1}将图像垂直居中}技巧。

这都是必需的，因为尽管YouTube的比例为21：9，但YouTube仍会为您的视频生成16：9 JPG缩略图，因此我们实质上是在使用此技巧来隐藏图像中的黑条。我仍然看到一个细小的裂缝，但是如果您担心，可以稍微调整transform: translateY(-50%)的比率，或者将padding-bottom的{{1}}增大到100％以上。

img

width

如何使YouTube缩略图的宽高比为21：9

1 个答案: