Video play on hover of image
<p>I am trying to play a video when someone hovers on an image and if they click it a pop should display playing that video so far I have achieved pop up and displaying video <code>onclick</code> but I want to achieve this hover thing</p>

<p>HTML</p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-3"&gt;
        &lt;img src="resources/image.jpg"  data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
        &lt;img src="resources/image.jpg"  data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
    &lt;   img src="resources/image.jpg"  data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JS    </p>

<pre><code>function showVideo(obj){
    $("#youtube").attr("src", $(obj).data("src"));
    $("#videoModal").on("hide.bs.modal", function () { 
        $("#youtube").removeAttr("src");
    }).modal('show');
}
</code></pre>

<p>Some more HTML</p>

<pre><code>&lt;div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel"&gt;
  &lt;div class="modal-dialog modal-lg" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class="modal-title" id="videoModalLabel"&gt;Modal title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
       &lt;iframe id="youtube" width="100%" height="500px"&gt;
&lt;/iframe&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>