Как получить соотношение сторон миниатюрного изображения YouTube, равное 21: 9 - PullRequest
Новая
       9

Как получить соотношение сторон миниатюрного изображения YouTube, равное 21: 9

0 голосов
/ 13 сентября 2018 

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

1 Ответ

0 голосов
/ 13 сентября 2018

Я изменил ваш пример кода, чтобы добавить два новых правила CSS, чтобы они соответствовали классу, который уже был у вашего HTML без стилей:

.m-modal-video__container--cinemascope определяет контейнер вокруг вашего изображения с соотношением сторон в кинотеатре, используяpadding-bottom трюк, который вы ранее пытались реализовать.

.m-modal-video__container--cinemascope img определяет размеры и расположение изображения внутри вышеуказанного контейнера.Зная, что вы хотите, чтобы это изображение сохраняло соотношение сторон, а не растягивалось, я удалил правило height: 100% (таким образом, высота рассчитывается автоматически) и центрировал изображение по центру с помощью трюка top: 50% и transform: translateY(-50%).

Это все необходимо, потому что YouTube все еще создал миниатюру JPG 16: 9 для вашего видео, несмотря на соотношение 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>
...