There block .wrapper_group , it iframe (youtube) .video_groups c video block .block_group top of it, with prompting on .wrapper_group hiding .block_group and seen .video_groups , mouse if removed from .wrapper_group the .block_group back covers .video_groups . How to make, so that when you click on the playback .video_groups remained even when you hide the mouse with .wrapper_group ?

 $('.wrapper_group').hover(function () { $(this).children(".block_group").css('visibility', 'hidden'); }, function () { $(this).children(".block_group").css('visibility', 'visible'); });

    1 answer 1

    It is necessary to check the status of the player, and for this to receive a link to it after the start of the YouTube API. In the example video-head is the id of the iframe element.

     var playerVideoHead; function onYouTubeIframeAPIReady() { playerVideoHead = new YT.Player('video-head', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }

    Changing the state of the player is done like this:

     togglePlayer(playerVideoHead); function togglePlayer(player) { if (typeof player.getPlayerState == "undefined") return; var state = player.getPlayerState(); if (state == YT.PlayerState.PAUSED) { player.playVideo(); } else { if (state == YT.PlayerState.PLAYING) { player.pauseVideo(); } } }