Question

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 onclick but I want to achieve this hover thing

HTML

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

JS

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

Some more HTML

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

Answer 1

您可以使用jquery悬停功能和您自己的功能播放视频：

$('#element').hover(function() {
    showVideo();
});

Video play on hover of image

1 个答案: