#html #css #reactjs #video #react-player
#HTML #css #reactjs #Видео #react-player
Вопрос:
Я не хочу, чтобы изображение плаката занимало все размеры этого видео, но сохраняло соотношение сторон и центрировалось. Как я могу этого добиться? Примечание: Это фрагмент. Фактический код — это код reactjs, который использует react player для встраивания видео. Я буду использовать config.file.attributes для отправки требуемых атрибутов в s, которые показаны здесь. использование style="object-fit=none" работает, но возможно ли это для react player?
фрагмент кода:
<!DOCTYPE html>
<html>
<body>
<h1>The video poster attribute</h1>
<video width="900" height="1240" poster="https://www.w3schools.com/images/w3schools_green.jpg" controls object-fit="none">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Run code snippetHide resultsExpand snippet
Ответ №1:
Если это вариант для вас, вы всегда можете создать оболочку <div> вокруг своего видео с теми размерами, которые вы хотите использовать. Сделайте так, чтобы у этого div был position: relative . Затем вы говорите, что видео имеет position: absolute и width: 100% (означает, что оно занимает 100% доступного родительского пространства). Высота будет адаптироваться автоматически, и соотношение сторон видео будет соблюдено. А для центрирования видео вы можете использовать, например, display: flex; align-items: center; на оболочке div. Надеюсь, это сработает!