CODEWITHSUNDEEP
javascriptjqueryyoutube
helloineedhelp
helloineedhelp

Reputation: 11

JQuery: YouTube Player - Mute Button

This is a video that plays on my site but the user can't actually see it, they can only hear it. I want to create a button so that if the user want's to mute the video at anytime then they can just select that button and all sound on the site will stop but if they click it again then they should be able to hear it again. If your struggling to understand what I mean please post a comment as it would be really helpful. Thanks!

// create youtube player
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '0',
      width: '0',
      videoId: 'a5SMyfbWYyE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

// autoplay video
function onPlayerReady(event) {
    event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {        
    if(event.data === 0) {            
        //alert('done');
    }
}

Upvotes: 0

Views: 939

Answers (1)

John
John

Reputation: 4981

First create a button in your html with an ID :

<input id="mute-toggle" type="button"/>

And get the ID with JQuery :

$('#mute-toggle').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});

Upvotes: 2

Related Questions