Остановить воспроизведение видео YouTube при закрытии CUSTOM модального окна
Привет, классные Overflowers.
Мне удалось реализовать красивый, простой модальный файл, который отображает видео на YouTube при нажатии на эскиз img. Моя проблема в том, что я не могу заставить видео останавливаться после закрытия модального окна.
Я пробовал здесь много идей и скриптов, но многие из них относятся к модальным окнам Bootstrap, и я не могу найти способ добавить их скрипты в свои собственные модальные окна.
Может ли кто-нибудь увидеть простое решение, которое могло бы остановить воспроизведение видео? Любая помощь будет оценена по достоинству. Спасибо
Пока что я использовал:
$jQuery('.modal-content iframe').attr('src', '');
чтобы попытаться заменить scr ничем, чтобы видео больше не могло воспроизводиться, но это не работает, когда я добавляю его в этот раздел своего кода:
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
$jQuery('.modal-content iframe').attr('src', '');
}
};
- Полный скрипт JS -
<script type="text/javascript">
jQuery(".modalBtn").click(function() {
// Get the ID name for the modal from the data-attribute
var id = jQuery(this).attr('toggle-modal');
// Use the ID from associated Modal that matches the attriutes name
var modal = document.getElementById(id);
// Get Modal close button
var closeModalBtn = document.getElementsByClassName("close");
// Open Modal
modal.style.display = "block";
// Close Modal when clicking anywhere outside of modal
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = "none";
$jQuery('.modal-content iframe').attr('src', '');
}
};
// Close Modal Function
function closeModal() {
modal.style.display = "none";
$jQuery('.modal-content iframe').attr('src', '');
}
for (var i = 0; i <= closeModalBtn.length; i += 1) {
closeModalBtn[i].onclick = closeModal;
}
});
</script>
- HTML, который его запускает -
<div id="MyModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<iframe src="https://www.youtube.com/embed/hiddenid" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
1 ответ
вы должны получить элемент видео, "html5-main-video" - это имя класса видео YouTube, поэтому вы можете использовать паузу, остановив видео, в модели, закрытой перед
var video = document.getElementsByClassName("html5-main-video")[0]
video.pause()
вы можете попробовать этот код в консоли YouTube, вы увидите остановку видео
-
0Спасибо Вам за информацию. Глядя на мой JS, где я могу объявить написанный вами фрагмент переменной? Спасибо James
-
0когда вы закрываете модальное окно // Закрываете модальное окно при нажатии в любом месте за пределами модального окна. onclick = function (event) {if (event.target === modal) {modal.style.display = "none"; var video = document.getElementsByClassName ("html5-main-video") [0] video.pause ()}}; SinHong
Другие вопросы
- Фоновое изображение заголовка исчезает и исчезает при прокрутке с нижним градиентом в приложении React1 ответ
Мое изображение заголовка исчезает (исчезает при прокрутке). Я достиг этого остроумного javascript в моем приложении React:useEffect(() => { const handleScroll = () => { if (parallaxDiv.current) { parallaxDiv.current.style.backgroundPositionY = `${ window.pageYOffse...
- Выберите элемент, необходимый в vuejs, не работает1 ответ
Я новичок в vuejs. Я хочу сделать элемент выбора из раскрывающегося списка обязательным, я попытался добавить требуемый атрибут, как в приведенном ниже коде. <v-select :items="fournisseursByClient" ...
- как добавить ссылки на липкую панель навигации1 ответ
Я попытался добавить фоновое изображение для своего веб-сайта django, и это вообще не сработало. Я использую этот ответ из stackoverflow, а также ссылку на вопрос stackoverflow. Но это не сработало. А также я переношу изменения в базу данных. добавить фоновое изображение как в методе cssbackground-i...
- Как заблокировать меню боковой панели, скрытое при обновлении страницы1 ответ
У меня есть меню боковой панели, которое было успешно скрыто и отображено. Когда меню боковой панели скрыто и я обновляю страницу или браузер, скрытое меню боковой панели вернется к своему первоначальному виду, а не в том положении, в котором оно было скрыто. Вопрос в том, как заблокировать, чтобы о...
- Как создать html-страницу со ссылкой [закрыто]1 ответ
Закрыто . Этот вопрос должен быть более конкретным . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он фокусировался только на одной проблеме, отредактировав этот пост . Закрыт в прошлом месяце . Уточните этот вопрос Как разместить видео ключи на моем...
- Как добавить проверку ввода в React?2 ответ
У меня простая форма, в которойfirstName а такжеlastName . <label htmlFor="firstName">First Name: </label> <input type="text" className="form-control" id="firstName" name="firstName" value={basicDet...
- onload функция Javascript return undefined2 ответ
Я вызываю функцию JavaScript, в которой хочу проверить высоту и ширину изображения перед загрузкой. я возвращаюсьfalse значение, но в исходной функции, когда это консольный журнал, он даетundefined . Для лучшего понимания проверьте код. Код работает нормально, но я хочу получитьtrue а такжеfalse из ...
- Фильтровать видео YouTube по категории1 ответ
В настоящее время я работаю над проектом, который отображает множество популярных видео YouTube из нескольких регионов. В настоящее время я работаю над функцией, которая позволяет пользователям фильтровать результаты по категориям и не имею честного представления о том, с чего начать реализацию. Вот...
- Избегайте неестественных разрывов слов4 ответ
у меня есть<h1> название с длинным словом, например следующее. Ширина браузера, конечно, зависит от устройства, но я заметил, что на одном из моих устройств это выглядит так: [IMG_OUR_ID=69.png] что не очень хорошо разбирается в словах. Как вместо этого попросить браузер делать "более при...
- Удалить текст из строки Javascript1 ответ
Ниже приведено изображение ответа, который я получаю при отправке формы с неправильным адресом электронной почты. [IMG_OUR_ID=74.jpg] Я хочу удалить слово сообщение: & фигурные скобки вокруг строки из этого ответа. Я пробую следующее:$('#registerStatus').text(response.replace('message:', '')) Н...
"Завидую тестировщикам: все хотят с ними дружить."