Я видел много сообщений об этом, но когда я добавляю изображение постера к элементу видео, размер видеоплеера меняется.
<video src = "/video.mp4" poster = "/image.jpeg" class = "videoPlayer" controls playsinline />
.videoPlayer {
cursor: pointer;
object-fit: cover;
}
img, video {
max-width: 100%;
height: auto;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
По каким причинам может меняться размер видео в зависимости от изображения?
внутренний размер элемента <video>
определяется его текущим кадром.
Когда отображается изображение из атрибута плаката, этот «текущий кадр» является рамка для плаката. Таким образом, рамка для плаката определяет внутренний размер <video>
.
В отсутствие другого правила, устанавливающего размер видео (например, атрибутов width
или height
или правил CSS), этот внутренний размер определяет размер отображения элемента.