Можем ли мы создать что-то вроде Object-fit: заполните Javascript/Jquery

Question

Я использую объектную посадку для видео. Я видел, что не работает в IE и некоторых других браузерах. Можно ли создать что-то вроде Object-fit: fill работает с Javascript/Jquery?

Answer 1

Да, конечно, вы можете сделать это.

Включите полифилл в вашу разметку

<script src="path/to/object-fit-videos/dist/object-fit-videos.min.js"></script>

Добавьте специальное свойство CSS семейства шрифтов для таргетинга IE/Edge или Safari.

video {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

объект-положение может использоваться аналогично. Обратите внимание, что в настоящее время объект-позиция поддерживает только позиционирование ключевых слов. Это сверху, снизу, слева, справа и в центре

video {
  object-fit: cover;
  object-position: left top;
  font-family: 'object-fit: cover; object-position: left top;';
}

Сделайте вызов JavaScript для инициализации видео со специальным свойством CSS

objectFitVideos();

Вы можете сделать вызов перед закрывающим тегом или всякий раз, когда DOM готов. Polyfill сделает все остальное.

Кроме того, вы можете найти дополнительную информацию на https://github.com/TricomB2B/object-fit-videos