Отображать уменьшенное изображение поверх встроенного в iframe видео YouTube

#html #reactjs #iframe #reactstrap

#HTML #reactjs #iframe #reactstrap

Вопрос:

Я хочу отобразить изображение в виде уменьшенного изображения, и при нажатии на него должно воспроизводиться видео YouTube. Я пытался использовать <video> тег, но он не поддерживает видео YouTube, следовательно, не смог установить изображение. Я хочу реализовать это в Reactjs. Кто-нибудь может предложить какое-либо решение для этого?

 <iframe
     width='100%'
     height='100%'
     src=[youtube_video_link]
     frameBorder='0'
     allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
     allowFullScreen
></iframe>
  

Ответ №1:

Я думаю, вы можете использовать reactplayer пакет в своем приложении, чтобы показывать любое видео с уменьшенным изображением. Вот оно доступно: ссылка

Базовый пример:

 <ReactPlayer                                                    
 className=[any_class_name]
 light={true}
 url={url}
 playing
/>
  

light реквизит прикрепляет миниатюру видео к видео.

Вы также можете установить уменьшенное изображение как любое другое изображение (по вашему выбору), просто заменив true на любой URL изображения.

Комментарии:

1. Я пытался использовать light = my_custom_image_url, но это не работает