Question

I have built a chromeless youtube player in a webpage, using the iframe API from the youtube dev site. Everything works like a charm, except when I view my page on an iPad or Android device, the video's volume and mute controls do not work.

_player.mute()
_player.setVolume(0);

Strangely, the other controls DO work, for example:

_player.pauseVideo();
_player.playVideo();
Was it helpful?

Solution

It works, you just need to run it after player is ready and functioning.

But on mobile devices, volume depends on the device's own setting rather than the player. So setVolume doesn't have any effect.

Here's an example: http://jsfiddle.net/iulukaya/XQ4bz/

var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player; function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '250',
        width: '444',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady
    }   }); }

function onPlayerReady(event) {
    event.target.playVideo();
    event.target.setVolume(0); }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top