Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Roberto dm7

Janela Modal não fecha áudio de vídeo

Recommended Posts

Algúem pode me ajudar?

Tenha uma janela modal para abrir vídeos iframe que abre e fecha normalmente no que diz respeito a imagens. Quanto ao áudio do vídeo, este continua aberto.

Não sei como resolver ois sou iniciante e careço de ajuda.

 

Segue configurações:

 

</a><title>jQuery Modal Window</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
 
var id = $(this).attr('href');
 
var maskHeight = $(document).height();
var maskWidth = $(window).width();
 
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
 
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
 
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
 
$(id).fadeIn(2000);
 
});
 
$('.window .close').click(function (e) {
e.preventDefault();
 
$('#mask').hide();
$('.window').hide();
});
 
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
 
});
</script>
<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}
a {color:#fff; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask {
position:FIXED;
left:0;
top:0;
width:100%;
height:100%;
margin: 0px 0 0 0px;
z-index:9000;
background-color:#5c5c5c;
display:none;
}
 
#boxes .window {
position:FIXED;
left:0;
top:0;
width:580px;
height:540px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width580px;
height:540px;
padding:0px;
background-color:#f3f3f3;
border: #ffffff 2px solid;
border-radius: 7px 7px;
-moz-border-radius: 7px 7px;
-webkit-border-radius: 7px 7px;
}
#boxes #dialog1 {
width580px;
height:540px;
padding:0px;
background-color:#f3f3f3;
border: #ffffff 2px solid;
border-radius: 7px 7px;
-moz-border-radius: 7px 7px;
-webkit-border-radius: 7px 7px;
}
#boxes #dialog2 {
width580px;
height:540px;
padding:0px;
background-color:#f3f3f3;
border: #ffffff 2px solid;
border-radius: 7px 7px;
-moz-border-radius: 7px 7px;
-webkit-border-radius: 7px 7px;
}
.close{display:block; text-align:right;}
</style>
<ul>
<li><a href="#dialog" name="modal"><h5>Vídeo 1</h4></a></li>
</ul>
<ul>
<li><a href="#dialog1" name="modal"><h5>Vídeo 2</h4></a></li>
</ul>
<ul>
<li><a href="#dialog2" name="modal"><h5>Vídeo 3</h4></a></li>
</ul>
<div id="boxes">
<div id="dialog" class="window">
<a href="#" class="close"> [X] 
<IFRAME src="http://www.clicartaxi.com/mcbvideo-1.html" width="575" height="485" scrolling="no" frameborder="0" style=" background-color:; border: #ffffff 2px solid; border-radius: 7px 7px; -moz-border-radius: 7px 7px; -webkit-border-radius: 7px 7px; " align="left"></IFRAME></a>
<input type="button" value="Fechar" class="close"/>
</div>
 
<div id="dialog1" class="window">
<a href="#" class="close">Fechar [X] 
<IFRAME src="http://www.clicartaxi.com/mcbvideo-2.html" width="575" height="485" scrolling="no" frameborder="0" style=" background-color:; border: #ffffff 2px solid; border-radius: 7px 7px; -moz-border-radius: 7px 7px; -webkit-border-radius: 7px 7px; " align="left"></IFRAME></a>
<input type="button" value="Fechar" class="close"/>
</div>
<div id="dialog2" class="window">
<a href="#" class="close">Fechar [X] 
<IFRAME src="http://www.clicartaxi.com/mcbvideo-3.html" width="575" height="485" scrolling="no" frameborder="0" style=" background-color:; border: #ffffff 2px solid; border-radius: 7px 7px; -moz-border-radius: 7px 7px; -webkit-border-radius: 7px 7px; " align="left"></IFRAME></a>
<input type="button" value="Fechar" class="close"/>
</div>
<!-- Máscara para cobrir a tela -->
<div id="mask"><width=500 height=500></div>
</div>

 

Grato,

Roberto

Compartilhar este post


Link para o post
Compartilhar em outros sites

vc precisa usar a api do youtube para pausar os videos:

 

https://developers.google.com/youtube/js_api_reference

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá William!

Vc pode me ajudar a encaixar o api do youtube nesse meu código. É que ainda não entendo muito bem. Peguei esse código pronto e só fiz algumas adaptações.

 

 

PS.: O code é todo esse postei lá em cima.

 

 

 

 

Aguém pode me ajudar por favor?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.