Как вставить ссылку на видео в файл изображения

Question

Как связать видео (размещенное на сервере) с изображением? Я продолжаю получать первый кадр видео вместо определенного c изображения, которое хочу отобразить. Мне также нужно, чтобы видео воспроизводилось в нужном размере на нескольких устройствах. На данный момент я могу установить высоту и ширину, но это не подходит для мобильных устройств.

Пример:

<p><a href="THIS IS THE VIDEO FILE I WANT TO LINK"><img src="/resources/Pictures/Website%20Pages/Members/Club%20TV/Summer%20Camp%20Nutrition.jpg" border="0" alt=""></a><br></p>

Answer 1

Вы можете использовать свойство controls poster, чтобы дать вашему видео плакат вместо показа первого кадра.

CSS свойство object-fit для заполнения плаката на основе width и height видео

video{
   object-fit: inherit;
}

<video width="400px" height=200px" controls poster="https://images.unsplash.com/photo-1590573124389-83f2133e0307?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
   <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4">
   <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg">
 </video>