[FIXED] How do I trigger an event on mouse over with iframes

Issue

I have tried everything and cant get the value of the next iframe, the i frames are echoed out using PHP. (code below)

    <div class="video" vid="'.$userID.'" '.$style.'"><iframe vid="'.$userID.'" width="200" height="200" src="http://www.youtube.com/embed/'.$urlLink.'?autoplay=1&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>

The video id is from the database. I currently have two videos and they both show different feeds so the src is working fine and the vid="" is set based on the users id, this is also changing each time correctly (I have verified this with inspect element).

The issue I'm having is trying to get the vid attr from the div to change on mouseenter. Using the code below I receive a popup but the video id is not changing. It is just alerting the first instance of the divs vid="" value.

I'm really stuck so any advise would be great.

$(document).on('mouseenter','div.video',function(e){

e.stopPropagation();

var videoID = jQuery('div.video').attr("vid");

 alert(videoID);

});

Solution

You're getting the value from the first element in the collection, as you're selecting all of them. To select just the hovered element use the this keyword :

$(document).on('mouseenter','.video',function(){
    var videoID = $(this).attr("vid");
    alert(videoID);
});

Answered By - adeneo

Answer Checked By - Timothy Miller (PHPFixing Admin)