Использование селектора атрибутов позволяет добавить максимальную ширину 100% к видео, но селектор классов этого не делает

#html #css

Вопрос:

На моей странице отображается тег видео, который должен иметь стиль CSS max-width: 100% . С помощью селектора атрибутов стиль применяется, но с помощью селектора классов он не работает.

Это работает

 video {  max-width: 100% }

 lt;videogt;  lt;source src="lt;path-to-videogt;" type="video/mp4" /gt; lt;/videogt;

Не работает

 .my-video-class {  max-width: 100% }

 lt;video class="my-video-class"gt;  lt;source src="lt;path-to-videogt;" type="video/mp4" /gt; lt;/videogt;

Кто — нибудь знает, почему это так? Другие стили, похоже, соблюдаются, например, если я добавлю border-radius: 10px; , что это соблюдается при любом подходе.

1. В каком браузере отображается эта проблема? Существуют ли какие-либо другие стили, которые применимы к video (проблеме иерархии)? Можете ли вы воспроизвести эту проблему с помощью фрагмента SO? Если да, можете ли вы подготовить указанный фрагмент и обновить свой вопрос?

Ответ №1:

Не могли бы вы, пожалуйста, проверить приведенный ниже код? Надеюсь, это сработает для вас.

Вам просто нужно добавить width:100% к .my-video-class нему , так как он займет всю доступную ширину.