Я внедряю видео в поле prettyPhoto ().
Это прекрасно работает с Chrome и Firefox, но при использовании в Safari видео предоставляется с минимальной шириной 700 пикселей.Это приводит к переполнению видео в контейнере prettyPhoto.
Элементом, о котором идет речь, является видеокадр HTML5:
<video controls="" autoplay="" src="https://development.materialshub.com/wp-content/themes/bolt/assets/video/web-explainer.mp4" type="video/mp4" class="media-document mac video"></video>
CSS выглядит следующим образом:
:host(.media-document.video.mac) {
min-width: 700px !important;
}
Если я удаляю класс 'mac' из видео, он ломает используемый селектор css - это предотвратит применение минимальной ширины и исправит макет.Но это может иметь дополнительные последствия, о которых я не знаю - я нахожусь на Mac, поэтому этот класс может понадобиться где-то еще для Mac?
Я думаю, что быстрым решением будет просто перезапись CSS с минимальной ширинойunset или auto.
Селектор CSS: host (.media-document.video.mac) {считается недопустимым параметром, поэтому его нельзя использовать.Я также пробовал .pp_content_container .pp_content .pp_full_res video {...
Надеюсь, кто-то может знать, как сбросить это в файлах prettyPhoto.js, поэтому он никогда не рассматривает min-width: 700 как значение вообще,это был бы лучший ответ.
Спасибо, Джейсон.