Css: Жидкая вставка youtube

Следите за мной на Youtube

Жидкая вставка youtube

В начале этой недели я прочитал твит о плавных вставках youtube. В своем примере он использовал TailwindCss, и поскольку я не очень большой поклонник css-фреймворков, я подумал, что было бы неплохо сделать пост/видео о том, как мы можем создать это с помощью обычного css. И вот мы здесь! 🙂

Встраивание в кадр

Встраивание Youtube — это не что иное, как простой iframe, поэтому давайте добавим его в нашу разметку.

<div class="fluid-yt">
  <iframe
    src="https://www.youtube.com/embed/IuhcUosPHMI"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  ></iframe>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Вы можете взять эти iframe embeds прямо с сайта youtube, и все, что нам нужно сделать здесь, это удалить свойства widht и height, потому что эти фиксированные значения не помогут нам сделать все отзывчивым.

Мы также обернем iframe в контейнер div с классом fluid-yt. А затем мы можем создать этот класс в нашем css.

.fluid-yt {
    aspect-ratio: 16 / 9;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы создаем наш класс fluid-yt и задаем ему соотношение сторон 16 / 9. Большинство видео имеют соотношение 16:9, и это гарантирует, что наш контейнер подгонит свою высоту под него.

Теперь нам нужно сделать так, чтобы наш iframe повторял размеры нашего контейнера.

.fluid-yt > iframe {
    width: 100%;
    height: 100%;
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Поэтому мы просто заставим iframe занять 100% ширины и высоты контейнера, чтобы он занимал столько же места.

Но если вы следите за кодированием, то заметите, что видео/iframe не масштабируется. По умолчанию div должен быть настолько большим, насколько это возможно по горизонтали, и настолько маленьким, насколько это возможно по вертикали. В данном случае высота является ведущей, и div становится таким же высоким, как видео, а из-за соотношения сторон 16 / 9 ему приходится уменьшать свою ширину.

Давайте это исправим.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Здесь мы заставляем контейнер div быть шириной 100% и соответствующим образом регулируем его высоту, чтобы соблюсти правило 16 / 9.

Теперь у нас есть полностью отзывчивая вставка видео youtube.

Исправление странного пространства.

Пока мы работаем над этим, есть небольшая вещь, которую мы должны исправить, чтобы все было идеально. Возможно, сейчас вы этого не видите, но на самом деле под нашим видео есть немного белого пространства. В большинстве случаев это не имеет значения, но если вам нужно выровнять что-то, это может вас смутить.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: pink;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, давайте дадим нашему контейнеру розовый фон, чтобы мы могли видеть это.

Я не совсем уверен в технической причине этого, но проблема вызвана тем, что iframe является инлайн-элементом, и поэтому, как и текст, он получает немного пространства внизу (то же самое верно и для изображений, если вы когда-нибудь столкнетесь с этой проблемой).

.fluid-yt > iframe {
    display: block;
    width: 100%;
    height: 100%;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы решить эту проблему, мы просто должны превратить наш iframe в блочный элемент, задав ему display of block.

Теперь он готов к повторному использованию в любых будущих проектах.

откат для старых браузеров

Поддержка браузерами всего этого довольно хороша, но если вы должны поддерживать старые браузеры, есть грязный fallback, который вы можете добавить в свой css. Я позаимствовал этот фрагмент из github-репозитория Джейдана Урвина.

@supports not (aspect-ratio: 16 / 9) {
  .fluid-yt { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
  }
  .fluid-yt > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Все готово! Вы также можете посмотреть этот кодепен для рабочего примера.

Подписывайтесь на мой канал Youtube
Купите мне кофе
Общайтесь в Twitter
И следите за моими статьями здесь

Спасибо за ваше драгоценное время, и удачного дня!

Оцените статью
devanswers.ru
Добавить комментарий