Почему скрипт работает только в Firefox и в Edge?

Потребовалась кнопка которая бы включала/выключала звук видео с Youtube.

Конкретнее, есть сайт - http://kleverstroy.ru на нем стоит фон видео в iframe с Youtube. По умолчанию всё в видео отключено, соответственно и звук. Иначе, если звук стоит, автоматически видео не воспроизводится при открытии сайта. И вот товарищ попросил добавить кнопку чтобы можно было включать выключать звук.

Перелопатил весь интернет, решения на иностранном мне трудно давались и не смог ничего сделать, в скриптах не понимаю. Нашел сайт альтернативный - http://www.domakrasnodar.ru/ у него в салйдере видео с того же Youtube и есть такая кнопка, которая включает/выключает звук. Решил взять за образец.

Поставил на свой, но вот блин у меня работает только в Firefox и в MS Edge, в Opera, Chrome, Yandex.Browser не работает, кнопка тупо не нажимается. Хотя на сайте откуда взял работает во всех браузерах!!! Не пойму в чём прикол, что я упустил.

Прицепил вот такой вот script:

$(document).ready(function(){
var iframe = $('#vid1');
var button = $('#mute-toggle');
var flag = 0;
$(button).on('click', function() {
if (flag == 0){
// unmute
flag = 1;
$(iframe)[0].contentWindow.postMessage('{ "event": "command", "func": 
"unMute", "method":"setVolume", "value":0}',"*");
$(this).find('.yotube-volume-button').removeClass('fa-volume- 
off').addClass('fa-volume-up');
}
else {
// mute
flag = 0;
$(iframe)[0].contentWindow.postMessage('{ "event": "command", "func": 
"mute", "method":"setVolume", "value":0}',"*");
$(this).find('.yotube-volume-button').removeClass('fa-volume- 
up').addClass('fa-volume-off');
}
});
});

#vid1 - вставил в iframe видео #mute-toggle - вставил в кнопку

Думаю очень полезная тема - Кнопка включить/выключить звук в видео-фоне (с Youtube) на сайте.

Может есть другие варианты, буду признателен. Но пока нормального простого решения по-русски так и не нашёл. Оно вроде и есть, но я, видимо, не смог нормально воспроизвести его.