CODEWITHSUNDEEP
javascripthtmlcss
greenboxgoolu
greenboxgoolu

Reputation: 139

Play Youtube video when hover image

Using : Carousel

  <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>

Above is my "carousel" image , everything works fine.

But i wanted to do is , when hover to the "image" show youtube links , any idea how should i do it ?

Tried :

using this method (https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover)

not working

Upvotes: 0

Views: 834

Answers (1)

Joundill
Joundill

Reputation: 7543

This will do what you want.

Just replace URL HERE with the URL you want to display. You might want to use a method other than the built-in alert, just replace it in the onmouseover attribute of your <a> tag.

<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>

Upvotes: 1

Related Questions