Воспроизведение Youtube видео при наведении изображения

Question

Использование: Карусель

  <div class="item active">
    <a href="xxx"><picture>
      <source media="(max-width: 900px)"  srcset="imagecat1/mobileview_scene.jpg" style=" max-width: 100%;
        max-height: 100%;
        display: block;">
  <img src="imagecat1/normal_scene.jpg" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
  </div>

Выше мое изображение "карусели", все отлично работает.

Но я хотел сделать это, когда при наведении курсора на "изображение" показать ссылки на YouTube Любая идея, как я должен это сделать?

Попробовал:

с использованием этого метода (https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover)

не работает

Answer 1

Это будет делать то, что вы хотите.

Просто замените URL HERE URL-адресом, который вы хотите отобразить. Возможно, вы захотите использовать метод, отличный от встроенного alert, просто замените его в атрибуте onmouseover вашего тега <a>.

<div class="item active">
    <a href="xxx" onmouseover="alert('URL HERE')"><picture>
      <source media="(max-width: 900px)"  srcset="imagecat1/mobileview_scene.jpg" style=" max-width: 100%;
        max-height: 100%;
        display: block;">
  <img src="imagecat1/normal_scene.jpg" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
  </div>