Javascript/JQuery видео Всплывающие

Я сделал всплывающее окно видео с помощью Javascript & JQuery, она прекрасно работает и дизайн должен немного работать, но его штраф, так как это просто царапина работа ...Javascript/JQuery видео Всплывающие

Единственная проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю кнопку закрытия, видео предназначено для остановки, однако оно продолжает идти в фоновом режиме. Вот код.

HTML:

<body> 
<div id="play"> 
<button>Play Video</button> 

<img src="1.jpg" /> 
<img src="2.jpg" /> 
<img src="3.jpg" /> 
<img src="4.jpg" /> 
</div> 

<div id="vid"> 
<iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"></iframe> 
<a href="#"><h1 id="close">X</h1></a> 
</div> 
</body>

CSS:

#video{ 
position: absolute; 
top: 200px; 
bottom: 400px; 
left: 400px; 
right: 400px; 
display: none; 
} 
#close{ 
font-family: arial; 
color: black; 
position: absolute; 
top: 100px; 
left: 250px; 
display: none 
}

Javascript/JQuery:

$(document).ready(function(){ 
$('#play').click(function(){ 
$('#video').css('display', 'block'); 
$('#video').css('position', 'fixed'); 
$('#close').css('position', 'fixed'); 
$('#close').css('display', 'block'); 
$('#play').css('opacity', '0.5'); 
}); 
}); 

$(document).ready(function(){ 
$('#close').click(function(){ 
$('#play').data('clicked', 'no'); 
$('#video').css('display', 'none'); 
$('#close').css('display', 'none'); 
$('#play').css('opacity', '1'); 
}); 
});

источник

2016-01-30 Khalid Almalki

Возможный дубликат [Stop встроенный IFRAME юность?] (Http://stackoverflow.com/questions/15164942/stop-embedded-youtube-iframe) –

Я также сталкиваются с той же проблемой, прежде чем какое-то время. Решение простое, нужно добавить iframe в id = vid и закрыть это при закрытии.

<div id="vid"> 
<span id="frame"></span> 
<a href="#"><h1 id="close">X</h1></a> 
</div> 

$(document).ready(function(){ 
$('#play').click(function(){ 
$('#frame').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/VNtYWDpdQ1w?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl" frameborder="0" allowfullscreen id="video"></iframe>'); 
$('#video').css('display', 'block'); 
$('#video').css('position', 'fixed'); 
$('#close').css('position', 'fixed'); 
$('#close').css('display', 'block'); 
$('#play').css('opacity', '0.5'); 
}); 
}); 

$(document).ready(function(){ 
$('#close').click(function(){ 
$('#frame').html(''); 
$('#play').data('clicked', 'no'); 
$('#video').css('display', 'none'); 
$('#close').css('display', 'none'); 
$('#play').css('opacity', '1'); 
}); 
});

источник

2016-01-30 18:39:12

Дайте мне знать, если больше необходима помощь. –

Спасибо Дипак, это действительно помогло мне! –

Привет, Халид, спасибо. пожалуйста, поддержите мой ответ. –

Javascript/JQuery видео Всплывающие

ответ

Смежные вопросы