CODEWITHSUNDEEP
youtube-api
user1937021
user1937021

Reputation: 10791

Hide YouTube controls when user hovers out

Is there a way to with the youtube api to hide the player controls when the user hovers out?

I current have the code when a user clicks it plays:

   $("#container.click-to-play-video").click(function(){
        player = new YT.Player('player', {
            width : '960',
            height : '600',
            videoId : 'PnHCKXe6ttU',
            playerVars: { 'autoplay': 1 , 'controls': 0 },
            events : {
                'onReady' : onPlayerReady,
                'onStateChange' : onPlayerStateChange
            }
        });
    });

But I only want the controls to play when the user enters with the mouse. Is it possible?

Upvotes: 0

Views: 1945

Answers (1)

Tim Wintle
Tim Wintle

Reputation: 2433

There is a player parameter "autohide" (docs: https://developers.google.com/youtube/player_parameters#autohide) which determines if the controls will hide during playback.

Setting that parameter to "1" will allow the controls to slide out of view when the video is playing and the user stops hovering over the video, which I believe is what you want to achieve.

You cannot force the controls to slide in or out at specific moments through code, or change the player parameters (such as the 'controls' parameter) once the player is created.

If you need very precise control over the display of the controls, then you would need to set controls=0 and create your own set of controls for the video.

Upvotes: 2

Related Questions