Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you mute an embedded Youtube player?

Tags:

I'm experimenting with the Youtube player but I can't get it to mute by default.

function onPlayerReady() {     player.playVideo();     // Mute?!     player.mute();     player.setVolume(0); } 

How do I mute it from the start?

Fiddle


Update:

JavaScript Player API is deprecated.
Use iframe Embeds instead.

like image 799
Jonathan Avatar asked Jul 21 '14 14:07

Jonathan


People also ask

How do I block ads on embedded YouTube videos?

If you don't want to show ads on your embedded videos, there's no way to directly turn off ads on embedded videos only. You may turn off embedding altogether.


2 Answers

Turns out player.mute() works fine. It only needed the parameter enablejsapi=1. Initial test in the fiddle didn't work because the player initiation had an error. The following works.

HTML:

<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/zJ7hUvU-d2Q?rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe> 

JS:

var player;  function onYouTubeIframeAPIReady() {     player = new YT.Player('ytplayer', {         events: {             'onReady': onPlayerReady         }     }); }  function onPlayerReady(event) {     player.mute();     player.playVideo(); } 

Fiddle

Credit to Gagandeep Singh and Anton King for pointing to enablejsapi=1

like image 93
Jonathan Avatar answered Sep 30 '22 19:09

Jonathan


All above answers didn't work for me for some reason. It might be weird wordpress theme that I had to use or depreciated methods at Youtube API, I'm not sure. The only way of muting the player was to insert the code below into tag.

// Loads the IFrame Player API code asynchronously.    var tag = document.createElement('script');    tag.src = "https://www.youtube.com/player_api";    var firstScriptTag = document.getElementsByTagName('script')[0];    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);      // Replaces the 'ytplayer' element with an <iframe> and    // YouTube player after the API code downloads.    var player;    function onYouTubePlayerAPIReady() {      player = new YT.Player('ytplayer', {          height: '390',          width: '640',          videoId: 'YOUR_VIDEO_ID',          playerVars: {            autoplay: 1,            controls: 1,            disablekb: 1,            hl: 'ru-ru',            loop: 1,            modestbranding: 1,            showinfo: 0,            autohide: 1,            color: 'white',            iv_load_policy: 3,            theme: 'light',            rel: 0          },          events: {              'onReady': onPlayerReady,          }      });    }    function onPlayerReady(event){      player.mute();  }
<div id="ytplayer"></div>
like image 34
Artem Kiselev Avatar answered Sep 30 '22 19:09

Artem Kiselev