Youtube iframe API - resetting volume

Question

I created an embedded iframe with the api and set the volume to zero. I use a script to change the source of the iframe, and noticed that the volume goes back to full.

I tried attaching player.setVolume(0); to the script to execute each time the source of the iframe is changed, but I'm getting an error that endlessly repeats a few times per second, constantly:

Unable to post message to http://www.youtube.com. Recipient has origin https://www.youtube.com. www-widgetapi-vflXx2oJO.js:26 g.A www-widgetapi-vflXx2oJO.js:26 g.F www-widgetapi-vflXx2oJO.js:25

this is the exact script:

$("#channel-1").click(function(){

$("#tv").attr("src", channel1);
$(".mid-bar").text("TNT");
player.setVolume(0);

});

where #tv is the iframe element generated by the youtube iframe api.

What's a better way to change the video source while keeping the volume at 0?

Answer 1

Instead of

$("#tv").attr("src", channel1);

Try

player.cueVideoById(channel1);

(or player.loadVideoById if you want it to autoplay)

That should load a new video into the existing player, keeping all other player parameters the same (including any event listeners you've set up).