Черные полосы на миниатюре видео при встраивании на мобильных устройствах (Wistia)

Разработка
1

Видео Wistia автоматически встраиваются, когда мы вставляем публичный URL медиафайла в Discourse. На планшетах и компьютерах всё работает отлично. Однако на телефонах у миниатюр появляются странные чёрные полосы.

Миниатюры видео YouTube на телефонах отображаются корректно.

При поиске по форуму я обнаружил, что в 2023 году команда предоставила исправление для YouTube. Возможно ли также исправить ошибку CSS для Wistia? Спасибо.

https://support.wistia.com/medias/26sk4lmiix

https://support.wistia.com/medias/26sk4lmiix

image
image353×432 30.6 KB

2

Вот решение на CSS, которое сохраняет пропорции без фиксированной высоты:

iframe[src*="wistia.net"] {
    aspect-ratio: 16 /9;
    height: auto;
}
3

Спасибо, что нашли время ответить Arkshine. Это выглядит как отличное решение. Я являюсь пользователем сообщества на Discourse, а не администратором. Могу ли я применить CSS напрямую к одному из своих сообщений в сообществе, или разработчику нужно будет добавить это в GitHub?

Например, если URL видео был

https://support.wistia.com/medias/26sk4lmiix
4

Нет, это нельзя применить напрямую. Вы всегда можете спросить администратора вашего сообщества на Discourse, могут ли они и готовы ли добавить этот фрагмент CSS. В конечном счёте, это точно нужно доработать в самом Discourse.

5

Хорошо, спасибо за ответ :slight_smile: Я ценю это :slight_smile:

Они не очень разбираются в технологиях, поэтому наверняка предпочтут подождать исправления CSS в самой платформе Discourse. Таким образом, исправление будет автоматически применено при обновлении программного обеспечения.