Как применить медиа-запросы CSS к видео-постеру?

Question

Благодаря этому ответу я использую video[poster]{object-fit:fill} в своем CSS, чтобы избежать искаженных изображений постеров в видео html5.Поскольку poster кажется стилевым, я также хочу использовать css для отображения различных плакатов для видео, в зависимости от размера экрана (мобильного или рабочего стола).Но video[poster]{background-image:url(poster.jpg) не дает никакого результата, предположительно poster не является фоном.Поэтому я попытался адаптировать какой-то javascript, найденный здесь , следующим образом:

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("video").poster = "poster1.jpg";
  } else {
    document.getElementById("video").poster = "poster2.jpg";
  }
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction)

Это тоже не работает, но, возможно, ему просто не хватает какой-то мелочи (даже оригинал *)1013 * не проходит проверку JavaScript) Кто-нибудь знает, как применять медиазапросы к свойству плаката?

Answer 1

Удалить x в myFunction(x).

API изменился, и теперь это будет событие, которое вы получите здесь, тогда как в предыдущих реализациях это действительно был MediaQueryList.

Просто сохраните ссылку на ваш MediaQueryList, и все будет в порядке.

function myFunction(evt) {
  console.log(evt && evt.toString());
  if (x.matches) { // If media query matches
    document.getElementById("video").poster = "https://lorempixel.com/200/400";
  } else {
    document.getElementById("video").poster = "https://lorempixel.com/400/200";
  }
}
var x = window.matchMedia("(max-width: 500px)")
myFunction() // Call listener function at run time
x.addListener(myFunction)

.as-console-wrapper{max-height:20px!important}

<video id="video" controls></video>