Bonjour

J'essaye de redimensionner des blocs proportionnellement lors d'un redimensionnement de la fenêtre.
ça fonctionne en image fixe, mais je veux que les blocs changent lors de la lecture d'une vidéo.
J'ai essayé d'imbriquer 2 fonctions, mais la fonction qui calcule les modifications effectue celles ci à chaque fois que time change.
Je voudrais trouver un moyen de n'appliquer celle ci qu'une fois lors d'un IF

Et il est fort possible que mes scripts soient une usine à gaz et qu'il y a plus simple, je suis preneur d'idée de simplification.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
// création de la div bloc
var bloc1 = document.createElement("div");
bloc1.id = 'bloc';
bloc1.style.border = '1px solid black';
bloc1.className = "bloc-interactif"; 
bloc1.style.top ='164'+"px";
bloc1.style.left ='215'+"px";
bloc1.style.height ='90'+"px";
bloc1.style.width ='320'+"px";
container.appendChild(bloc1);
 
// passage en variable des éléments de la div créée
var hauteurbloc=bloc1.offsetHeight;
var largeurbloc=bloc1.offsetWidth;
var ratiobloc=largeurbloc/hauteurbloc;
var pos_left=bloc1.offsetLeft; 
var pos_top=bloc1.offsetTop;
var hauteurblocmouv=bloc1.offsetHeight;
var largeurblocmouv=bloc1.offsetWidth;
var pos_leftmouv=bloc1.offsetLeft; 
var pos_topmouv=bloc1.offsetTop;
 
// la fonction est appelée sans détection de redimensionnement
eleme.ontimeupdate = function() {defilement(); };	
 
// si on resize la feneêtre
window.addEventListener("resize", function(){
	resize();
 
	eleme.ontimeupdate = function() { defilement();};
});
 
// ************************************************************************************
 
// 							FONCTIONS
 
// -***********************************************************************************
 
 
function defilement() {
 
if(time<12){
 
	bloc1.style.height=100+"px";
	bloc1.style.top=pos_top;
	bloc1.style.left=pos_left;
	bloc1.style.width=largeurbloc;
	bloc1.style.backgroundColor="red";
	resize();
 
}
if(time>=12){
	bloc1.style.left=226+"px";
	bloc1.style.width=350+"px";
	resize();
 
}
 
if(time>=19){
	bloc1.style.width=420+"px";
	bloc1.style.WebkitTransform ="rotate(3deg)";
 
 
}
if(time>=26){
	bloc1.style.left=255+"px";
	bloc1.style.width=500+"px";
	bloc1.style.WebkitTransform ="rotate(3deg)";
 
}
 
 if(time>=39){
	bloc1.style.WebkitTransform ="rotate(10deg)";
 }
hauteurblocmouv=bloc1.offsetHeight;
largeurblocmouv=bloc1.offsetWidth;
 
pos_leftmouv=bloc1.offsetLeft; 
pos_topmouv=bloc1.offsetTop;
}
 
 
function resize(){
 
	var nouvelle_hauteur_container=container.offsetHeight;
	var nouvelle_largeur_container=container.offsetWidth;
 
	// si on agrandit
	if(nouvelle_hauteur_container>hauteur){
		// calcul du pourcentage d'agrandissement
		var nouvoratio_l=nouvelle_largeur_container/largeur;
		var nouvoratio_h=nouvelle_hauteur_container/hauteur;
		// var nouvoratio_h=nouvelle_largeur_container/ratiobloc;
 
		// calcul des dimensions du bloc
		var nouvo_l_block=largeurblocmouv*nouvoratio_l;
		var nouvo_h_block=nouvo_l_block/ratiobloc;// calcul par le ratio pour éviter une erreur si la vidéo n'occupe pas toute la hauteur
 
		var nouvo_pos_top=(pos_topmouv*nouvoratio_h)-35;// affectation de -35 ?? pour caler
		var nouvo_pos_left=pos_leftmouv*nouvoratio_l;
 
		bloc1.style.width=(nouvo_l_block)+"px";
		bloc1.style.height=(nouvo_h_block)+"px";
		bloc1.style.top=nouvo_pos_top+"px";
		bloc1.style.left=nouvo_pos_left+"px";
 
	}
 
		// si on diminue
	else{
		bloc1.style.top=pos_top+"px";
		bloc1.style.left=pos_left+"px";
		bloc1.style.width=largeurbloc+"px";
		bloc1.style.height=hauteurbloc+"px";
		bloc1.style.backgroundColor="green";
	}
 
}