Arrêter une vidéo à la fermeture fenêtre vidéo
Bonjour bonjour,
Donc, me voici nouveau sur ce forum,
donc brievement pour me situer: je suis tres débutant en js et toujours en phase d'apprentissage concernant l html et css mais je progresse petit a petit (du moins je l'espère). Pour le moment, afin d'enrichir mon site en cours de construction, je recupere des bouts de code a droite a gauche que je minimalise pour en comprendre le fonctionnement et les utiliser ensuite; ca allait jusqu'a maintenant mais la j'ai un souci:
j'ai réussi a creer un fenetre "popup" dans laquelle se joue mes vidéos, La video se lance bien, mais problème, lorsque je ferme cette fenetre en cliquant sur ma croix de fermeture, la video semble continuer en arriere plan (le son continu)
Comment faire, que dois-je rajouter pour que mon video s'arrete a la fermeture de ma "pop video" et donc laisser place nette pour une eventuelle autre video regardee?
J'aurai 2 cas dont le 2eme semble plus délicat (au vue de mes recherche sur le net), des videos hebergees sur mon site et d'autres en lien sur d'autres sites (tel ina.fr que j'aimerais frequement utiliser)
Merci pour votre aide et vos enseignements
Un lien pour visualiser pour que ce soit plus simple
http://synergology.jp/trial3.html
;)
Voici mon code pour illustrer mon pb:
_______
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
| <html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Video Pop-up</title>
<style type="text/css">
body {
background: #FFF;
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
line-height: 1.8em;
min-width: 980px;
}
img {border: none;} /*supprime le contour eventuel autour image croix de femeture */
a {color: PURPLE;}
.container {width: 900px; margin: 0 auto; font-size: 1.2em; color: FUCHSIA;}
#content { background: #F3F3F3; float: left; width: 100%;}
/*------------------POPUPS------------------------*/
#fade { /*--COULEUR FOND AUTOUR POPUPS--*/
display: none;
background: YELLOW;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: .30;
z-index: 9999;
}
.popup_block{ /*--FENETRE POPUP--*/
display: none;
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -20px -20px 0 0;
width:50px;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
</head>
<body>
<div id="content">
<center><a href="#?w=500" rel="pop-ferra" class="poplight"><img src="http://www.leprogres.fr/fr/images/DA9F16BC-35D2-46FD-8E42-8C87B5DE37BE/LPR_03/jean-ferrat-jean-d-ardeche.jpg" id="ferra"/></a></center>
</div>
<!--POPUP START-->
<div id="pop-ferra" class="popup_block" style="display: none; width: 500px; margin-top: -359px; margin-left: -290px; ">
<iframe width="512" height="384" frameborder="0" marginheight ="0" marginwidth="0" scrolling ="no" src="http://www.ina.fr/video/embed/I00013436/1057927/d84a2c6679db51b8773d3668c98cddcc/512/384/0" ></iframe>
</div>
<!--END POPUP-->
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://betanews.com/wp-content/uploads/2012/03/close-button-300x300.jpg" class="btn_close" title="Fermer la fenetre" alt="Fermer""</a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
:coucou:
</body></html> |
_______
