У меня была такая же проблема со встроенным видео на YouTube. Это было окончательное решение, которое работало в IE, Firefox, Chrome и Safari:
Ниже приведены сценарий jQuery, HTML и CSS, используемые для решения проблемы IE, связанной с продолжением воспроизведения звука, когда встроенное видео YouTube скрыто.
Это скрипт jQuery (который я поместил непосредственно перед конечным тегом body):
<script type="text/javascript">
$(function() {
$('.close').click(function() {
// needed to find some way to remove video and then replace it because IE would close the div but continue to play sound
$('iframe').hide(); // must hide the YouTube iframe first or closing it before playing will cause a black window in IE
$('#video1').hide('fast'); // then hide the container div that has the video div that has the YouTube iframe in it
var bringback = $("#tinleyvideo").clone(true); //clone the div that has the YouTube iframe and assign it to a variable
$("#tinleyvideo").remove(); // remove the div that has the YouTube iframe
$("#video1").html(bringback); // replace or recreate the div that has the YouTube iframe using the variable with cloned information
});
$('.tourism').click(function() {
$('iframe').show(); // show the YouTube iframe
$('#video1').show('fast'); // show the div that contains the YouTube video div
});
});
Вот структура HTML. Тег ссылки с классом «туризм» - это ссылка на изображение, используемая для вызова всплывающего окна с видео. Тег div с идентификатором «Video1» представляет собой контейнерный блок для div с идентификатором «tinleyvideo», который содержит встроенный код YouTube. Тег ссылки с классом «close» скрывает видео с помощью jQuery.
<a href="#" class="tourism"><img src="images/home_video.jpg" width="217" height="161" border="0"/></a>
<div id="video1">
<div id="tinleyvideo"><a href="#" class="close" style='float:left; color:white; padding-bottom:10px; font-size:12px;'>Close</a><br />
<iframe width="560" height="315" src="http://www.youtube.com/embed/XxnM7UzquSs?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS (он позиционирует всплывающее окно, изначально не отображает его и добавляет другие пользовательские стили):
#video1 {
position: absolute;
top:240px;
left:220px;
width:560px;
height:360px;
display: none;
-moz-border-radius: 10px;
padding: 10px;
background-color: #486A74;
border: 3px solid #DCC35C;
z-index:400;
}
Надеюсь, это поможет.