1

I am trying to load YouTube player using IFrame api.

DOM Structure

<div id="player-wrapper">
    <div id="player">
    </div>
</div>

Jquery code to load player

$(document).ready(function () {
        $('head').append($('<script src="https://www.youtube.com/iframe_api"></script>'));
});

window.onYouTubeIframeAPIReady = function() {
    Player = new YT.Player('player', {
        videoId: 'RVRlV53TjzY',
        playerVars : {
            theme  : 'light',
            color  : 'red',
            iv_load_policy : 3,
            modestbranding: 1,
            disablekb: 1,
            showinfo: 0,
            controls: 0,
            autoplay: 1,
            fs:0
        }
    });
};

With this structure, YouTube player loads in div with id as 'player'. Along with loading YouTube player, I want to bind mousemove event on player-wrapper. On mousemove of this container, I want to show some message to user over the YouTube player.

I am trying to do this with:

$("#player-wrapper").bind('mousemove', function() {
    console.log("You are viewing YouTube Video ");
});

I see that, when YouTube player is loaded, I do not get this mousemove event on player-wrapper. I tried replacing YouTube player with normal HTML5 video tag. With this I started getting mousemove event. Also looked into z-index property of these elements, but couldn't figure out what is happening.

Please help.

Thanks.

sonam
  • 875
  • 2
  • 18
  • 37
  • The issue you have is that the iframe content is on a separate domain to the parent page, therefore no data can pass between the two elements. There is no workaround for this as it's a security feature of the browsers. See the question I linked for more information. Personally, I would use the HTML5 player - it's better in every way. – Rory McCrossan Oct 01 '15 at 08:49
  • 1
    I don't want data to be passed between two elements. I just want to listen on 'mousemove' event in the DOM outside that iframe. – sonam Oct 01 '15 at 09:09
  • @RoryMcCrossan, This should not be marked as a duplicate. the OP is trying to get events from the wrapper div, NOT the iframe contents itself – Jeremy Apr 29 '16 at 20:09
  • @JeremyLee The issue is the exact same in both cases. When the mouse moves over the iframe, the event is sent to the contents of the iframe only, not its parent. – Rory McCrossan Apr 29 '16 at 20:22
  • @RoryMcCrossan Thanks for the clarification. That portion was not clear based on the prior comments. Seems like the question is different, but the answer is the same. – Jeremy May 03 '16 at 00:48

0 Answers0