1

Имеется блок .wrapper_group, в нем iframe (youtube) .video_groups c видео и блок .block_group поверх него, при наведении на .wrapper_group скрывается .block_group и видно .video_groups, если мышку убрать с .wrapper_group то .block_group обратно покрывает .video_groups. Как сделать, чтобы при нажатии на воспроизведение .video_groups оставался даже при скрытии мышки с .wrapper_group?

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

1 ответ 1

2

Надо проверять состояние плеера, а для этого получать ссылку на него после старта API YouTube. В примере video-head - это id элемента iframe.

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

Изменение состояния плеера делается так:

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();
        }
    }

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.