Bootstrap Modal продолжает проигрывать аудио после закрытия видео окна в Firefox - PullRequest
Новая
       9

Bootstrap Modal продолжает проигрывать аудио после закрытия видео окна в Firefox

0 голосов
/ 03 сентября 2018

Ниже приведен полный код тестирования. Пример работает на http://public.eitan.ac.il/modal/modal-video.html

Я пытаюсь запустить видео на YouTube во всплывающем окне, используя модал, но после закрытия окна в Firefox звук продолжает воспроизводиться. В хроме это работает хорошо.

Какие-нибудь решения? 10x 

var mobileDetect = new MobileDetect(window.navigator.userAgent);

/*
$(document).ready(function(){ 
	$("#myModal").on('hidden.bs.modal', function (e) { $("#myModal #iframeYoutube").attr("src", $("#myModal 		#iframeYoutube").attr("src")); 

	}); 
*/

	$(document).ready(function(){
		$("#myModal").on("hidden.bs.modal",function() 
			{ $("#iframeYoutube").attr("src","#");
		})
	})

	function changeVideo(vId){
		var iframe=document.getElementById("iframeYoutube");
		iframe.src="https://www.youtube.com/embed/"+vId+"?autoplay=1&modestbranding=1&rel=0&showinfo=0";


	if (mobileDetect.mobile()) {
		window.location = "https://www.youtube.com/watch?v=" + vId;
	return;
	  }

	   $("#myModal").modal("show");
	}
<!DOCTYPE html>
<html lang="en">

<head>
	<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="modal.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script type='text/javascript'src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.2/mobile-detect.min.js"></script>
</head>

<body>

<a href="javascript:changeVideo('e80BbX05D7Y')"><button class="main-btn">Watch</button></a>
		
<!-- Modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">

<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><a href="#"><span aria-		hidden="true" style="color:white">&times;</span></a></button>
			      </div>

				<div class="modal-body">
					<iframe id="iframeYoutube" width="700" height="394" src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe>    
				</div>
			</div> 
		</div>
	</div>

</body>

</html>

1 Ответ

0 голосов
/ 03 сентября 2018

проблема в вашей hidden.bs.modal функции, замените # на _blank

$(document).ready(function(){
    $("#myModal").on("hidden.bs.modal",function() 
        { $("#iframeYoutube").attr("src","_blank");
    })
})
...