Détecter le changement d'orientation du mobile ??

Bonjour,

pour afficher des vidéos Youtube sur un smartphone, en RWD, j'utilise cette technique: mettre l'iframe dans un div class="video" et appliquer le style suivant (les 75% représentent le rapport 4/3)

.video  {
	position:relative;
	padding-bottom:75%;	
	padding-top:25px;
	height:0;
	margin-bottom:1em;
}
.video iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	text-align:left;	
}

la vidéo se cadre bien dans le téléphone, par contre si je passe en mode paysage et si je reviens en mode portrait, la vidéo garde la taille qu'elle a pris dans le mode paysage.

y a t'il un moyen de remédier à cela ou forcer le rechargement?

Merci
Modifié par lionel_css3 (13 Apr 2013 - 16:18)

en farfouillant sur google, j'ai pu constituer ce code qui fonctionne bien, mais est ce la meilleure solution?

window.addEventListener("orientationchange", function(){
   if (window.orientation == 0)  {  
   alert("La page doit être rechargée pour aligner les vidéos");
   location.assign(location.href);
   }
}, false);

benj a écrit :
Pourquoi ne pas modifier les dimensions de ta div via javascript quand tu détecte un changement d'orientation ?

les dimensions sont relatives, pour la div... je ne peux pas agir dessus..
Modifié par lionel_css3 (14 Apr 2013 - 08:19)

Connaitre la dimension d'une div ce n'est pas très dur avec jQuery.

je pense pas que ça changerait quelque chose de connaitre la largeur de la div.
de toutes façons je me suis rendu compte que la lecture de la vidéo se faisait plein écran sur le smartphone, donc j'ai refait le css et j'ai attribué 300px de large à la vidéo (en fait sa vignette) dans les deux orientations, et ça résout mon problème...