CODEWITHSUNDEEP
javascriptjqueryinternet-exploreryoutubesafari
Front-end Developer
Front-end Developer

Reputation: 410

How to get YouTube API muted in Internet Explorer 11 and Safari

I have tried to mute YouTube API as you might see, but it works in Chrome and Firefox. How can I get this muted in Internet Explorer and Safari as well. Is there a way to fix this with JavaScript? Have Googling around, but could not find any proper answer to solve this. 

var player;
var player2;

function onYouTubeIframeAPIReady(){
	player = new YT.Player("video1", {
		videoId: "KKp9g8fTBDQ",
		width: 300,
		height: 200, 
		playerVars: {
			"autoplay": 1,  
			"controls": 1,
			"showinfo": 0,
			"modestbranding": 0,
			"loop": 1,
			"fs": 0,
			"cc_load_policy": 0,
			"iv_load_policy": 3,
            "mute": 1  
			},
		events: {
		    "onReady": onPlayerReady
		}
	});
	player2 = new YT.Player("video2", {
		videoId: "O5-o0DpB6z0",
		width: 300,
		height: 200, 
		playerVars: {
			"autoplay": 1,
			"controls": 1,
			"showinfo": 0,
			"modestbranding": 0,
			"loop": 1,
			"fs": 0,
			"cc_load_policy": 0,
			"iv_load_policy": 3, 
            "mute": 1  
		},
		events: {
		    "onReady": onPlayerReady
		}
	});
}

function onPlayerReady(event) {
   	event.target.setPlaybackQuality("hd1080");
    event.target.setVolume(50);
    player.mute();
}

//tried these options as well, but nothing works. 

var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");

video1.mute();
video2.mute();

video1.volume = 0.0;
video2.volume = 0.0;

Upvotes: 3

Views: 750

Answers (1)

Dekel
Dekel

Reputation: 62556

Instead of using player.mute(); inside the onPlayerReady function you should use event.target.mute(). This way you call the mute function that is related to the specific video that the onPlayerReady callback was called for.

Here is a working codepen:
http://codepen.io/anon/pen/kXOXWo

(It will not work inside the codepen with IE due to cross origin and iframe, but the code was checked with both Chrome, Firefox, IE and Safari and all work).

update

For some reason when using "autoplay": 1 together with the mute() option - every several times you do a refresh in ie your video is still not mute. The solution I found for this was to set "autoplay": 0 together with

function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

This is the complete codepen:
http://codepen.io/anon/pen/NAQXar

Hope now it will work :)

Upvotes: 1

Related Questions