0

Потребовалась кнопка которая бы включала/выключала звук видео с 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) на сайте.

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

1 ответ 1

0

Переработал походу ))
Подключил библиотеку jQuery с google и всё заработало! Добавил перед </head> строчку: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Ответьте для понимания, как работало без библиотеки в FF и Edge?

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.