0

I´m trying to have live previews of videos playing when the mouse hovers an image link just like the new facebook live video application. When you hover the blue dots a small thumbnail with the video shows up and when you click it it goes full screen but i´m missing something in my Jquery code:

Here is the fiddle: enter code herehttps://jsfiddle.net/1w52qy3b/3/

And here is an example of what i want to do but with videos: http://jsbin.com/urarem/3/edit?html,css,output

The blue dot in this fiddle is too far away from the city map coordinates but works on desktop browser view. This is only for this problem purpose.

So basically there will be several blue dots across the map and two or three will have videos playing. I´m just not getting the video playing on mouseover.

Thanks for the help in advance

Fab
  • 145
  • 3
  • 20
  • I dont think you can use video tag like that. look at [this answer](http://stackoverflow.com/a/20113717/3591300). Also, your fiddle doesnt have jQuery. and also there is [this sample](http://stackoverflow.com/a/20707217/3591300) that looks like what you want. It also got a live [JSFiddle Sample](http://jsfiddle.net/gpJN4/3/). – Amin Gharavi May 20 '16 at 03:22
  • Possible duplicate of [Start youtube video on hover/mouseover](http://stackoverflow.com/questions/20706799/start-youtube-video-on-hover-mouseover) – Amin Gharavi May 20 '16 at 03:23
  • I searched over the internet and found the code example on this website: https://ardhadve.wordpress.com/2015/01/14/play-html5-video-on-hover-and-pause-on-mouse-leave-on-the-video/ The example you gave me is a bit diferent than what i want to do since i want the videos to be hidden and only show up when the user hovers the blue dot. Should i use an iframe instead? – Fab May 20 '16 at 09:39
  • I´ve edited my question with a link with what i want. It´s called a live preview that i forgot to describe – Fab May 20 '16 at 09:49
  • Ok, i´ve worked things around as you can see in the updated fiddle https://jsfiddle.net/1w52qy3b/7/ . I still have a few questions: how to i offset the video from the blue dot? It is playing over the dot, i want it a little bit below.By the way, I was actually trying the hover method of jquery and although the video showed it wouldn´t hide after the mouse leaving, the way i did it is fine? Or is there a better solution? – Fab May 20 '16 at 23:29
  • I forgot to ask: how does the video autoplay on mousenter and stop after the mouse leaves? – Fab May 20 '16 at 23:32
  • There's a couple of mistakes in there (like display:none, put it in your html like ` – Amin Gharavi May 20 '16 at 23:33
  • Alright, looking forward to your explanation. Thanks Amin. – Fab May 21 '16 at 15:29
  • Here, [have a look at this one](https://jsfiddle.net/1w52qy3b/9/), its not ideal but it gives you an idea. – Amin Gharavi May 23 '16 at 01:41

0 Answers0