on hover image it should play video

Question

I need some help here.. I have linked video to my images so if someone clicks on my image a video pops up but I want the video should play as soon as someone hovers the image. SCENARIO: there are 4 images in one row(250*250 pixel size) and If someone hovers the first image or any image the video should play in the same size of image(250*250) and if they move mouse to another image this video should stop and video for that particular image should start playing

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');

}

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>

Im not sure, but I think you can't play/pause an iframe. Maybe using the API or something. Check http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe http://stackoverflow.com/questions/12522291/pausing-youtube-iframe-api-in-javascript — yuriy636, Aug 09 '16 at 21:36
Have you looked into using the onmouseover and onmouseout events? Put them on your images and start playing video when the mouse enters the element and stop playing it when the mouse leaves. http://www.w3schools.com/jsref/event_onmouseover.asp http://www.w3schools.com/jsref/event_onmouseout.asp — Daryl, Aug 09 '16 at 21:36
@Daryl I tried onmouseover but It just fires my pop up I want to play video instead of my image so if someone hovers on image, image should go and video should start in same 250*250 pixel and if they click on it the pop up should come — Raul, Aug 09 '16 at 21:53
Instead of using an iframe why not just use an HTML5 video element? That should allow you to control the playback of the video programmatically on mouseover / mouseout. http://www.w3schools.com/html/html5_video.asp — Daryl, Aug 09 '16 at 21:55
It won't be supported by some older browser.. But MY problem is not related to iframe or HTML5 I need some script/solution that plays video on hover of image and displays it — Raul, Aug 09 '16 at 21:57
Check out this fiddle: I updated it - https://jsfiddle.net/vwvwzovh/3/ — Daryl, Aug 09 '16 at 23:28
@Daryl : Yup this is what I want. it works but onclick is not working — Raul, Aug 10 '16 at 14:51

Ravi Shankar Bharti · Answer 1 · 2016-08-10T15:39:11.117

0

Add an iframe after each image with display:none. change to display:block for onMouseOver,and onMouseOut it should change to display:none. Create functions for onMouseOver and onMouseOut in yourjs`.

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

    <iframe id="youtube" width="100%" height="500px" style="display:none;">
    </iframe>
</div>

And in your js:

//add onHover function.
function showVideoOnHover(obj)
{
    $("#image").css("display","none");
    $("#youtube").css("display","block");
    $("#youtube").attr("src", $(obj).data("src"));
}
function hideVideo()
{
    $("#youtube").css("display","none");
    $("#image").css("display","block");
}

edited Aug 10 '16 at 15:39

answered Aug 09 '16 at 21:38

Ravi Shankar Bharti

8,922
5
28
52

Doing this pops up the video as soon as I hover to image I want to play video instead of that image so if I hover on image the video should play in that 250*250 pixel space and onclick will open the pop up – Raul Aug 09 '16 at 21:50
I know I am asking for more but Can you please provide a fiddle Because I Want to make sure its working the same way as I want because building takes some time.. – Raul Aug 09 '16 at 22:03
I have given you the solution already. Try that at least once. Currently, i am unable to provide you JSFiddle. Once, i can i will create a fiddle , and post it here. For now,please try that solution. – Ravi Shankar Bharti Aug 09 '16 at 22:31
I tried this it's not working. I tried putting alert on all lines of function it work but the video doesn't play – Raul Aug 10 '16 at 14:58
there is no error. Just to make sure I am going into that onmouseover I tried alert on each line and its working means my function is going working but the video is not playing – Raul Aug 10 '16 at 15:19
It is playing on click, but not on hover? Is this your problem? Is the frame coming up on hover? – Ravi Shankar Bharti Aug 10 '16 at 15:22
YA it is playing onclick but nothing happens on onmouseover no iframe nothing no errors but I am going into the function – Raul Aug 10 '16 at 15:24
can you provide me a fiddle, i will try to edit and solve your issue – Ravi Shankar Bharti Aug 10 '16 at 15:30

on hover image it should play video

1 Answers1