Iframe/vidéo qui ne se redimensionne pas

Version imprimable

25/01/2014, 01h42
Yepazix

Iframe/vidéo qui ne se redimensionne pas

Bonjour,
j'ai une vidéo YOUTUBE sur cette page :
http://127.0.0.1/Etat%20au%2022.01.2...ta_2/index.php

Essayez de redimensionner la page et vous voyez le drôle de truc que ça fait ?

Je voudrais que ma vidéo s'affiche "propre" comme quand on fait avec une image des %. Mais là je ne sais pas prq ça va pas.

Mon code pour YOUTUBE est :

Code:

<iframe width="100%" height="100%" src="<?php echo $video;?>"frameborder="0" allowfullscreen></iframe>

Si au lieu de 100% je met des dimentions en px là ca va mais du coup évidement pas de redimentionage ...
25/01/2014, 08h16
Muchos

Merci de donner le lien de votre site en ligne, pas de votre serveur local :)
25/01/2014, 11h44
Yepazix

oops :oops:

voila :

http://espaceimy.cluster010.ovh.net/jdw_test_beta_2/
26/01/2014, 03h08
Muchos

Chez moi, la petite frame est bien à droite de l'affiche du spectacle, au-dessus du lien "Toutes les vidéos ici". Au redimensionnement de la page, ça ne change pas.
Je suis sous Firefox 20 (pour Ubuntu).
26/01/2014, 14h55
Yepazix

2 pièce(s) jointe(s)

Le problème ce n'est pas la taille mais le fait que la proportion originale de "l'objet" ne soit pas conservée.
Si je dimensionne la zone comme le conseil Google :

Code:

<iframe width="403" height="240" src="<?php echo $video;?>"frameborder="0" allowfullscreen></iframe>

alors j'obtiens ceci :
Pièce jointe 135524
(Une belle image grande et sans "déchets".

Si je veux que la zone se redimensionne je dois passer en pourcentages et je fais donc ceci :

Code:

<iframe width="100%" height="100%" src="<?php echo $video;?>"frameborder="0" allowfullscreen></iframe>

Mais alors j'obtiens ceci (que tu as aussi normalement) :
Pièce jointe 135525
Une image toute petite bordées de lignes noires qui ne ressemblent a rien avec l’icône de la chaine perdue en haut à droite.

Ce que je voudrais faire c'est garder l'apparence de départ mais faire que ça se redimensionne....

Tu vois ce que je veux dire ?

C'est simplement parce qu'une page web n'a pas de hauteur par défaut (contrairement à la largeur). Il faut donc la définir.
Par exemple, testez le code suivant en zoomant/dézoomant. Maintenant, supprimez la règle CSS pour HTML/BODY et re-testez. La hauteur de la DIV, en % donc relative, n'est relative de plus rien…
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html dir="ltr" lang="fr-FR"> <head> <meta charset="UTF-8" /> <title>boite dimensionnée avec la page</title> <style type="text/css"> html, body { height: 100%; } div { margin: auto; width: 50%; height: 50%; background: red; } </style> </head> <body> <div>test</div> </body> </html>
Comme souvent, tout est une question de choix d'intégration ;)

Bonjour,
un peu de jQuery :

Code:

1
2
3
4
5
6
7
8
9
<iframe src="<?php echo $video;?>" frameborder="0" allowfullscreen></iframe>   
<script>
$(function() {
	$('.art-layout-cell iframe').on('load', function() {
		$(this).width('100%');
		$(this).height($(this).width()*240/403); // en proportion
	});
});
</script>

26/01/2014, 23h06
Yepazix

@ Muchos : Je ne comprends pas bien ton explication.
Pas de hauteur par défaut pour la page web OK mais on s'en fou puisque c'est sur la hauteur de l'objet (ici ma vidéo YOTUBE) qu'on veut travailler non ?

@ jreaux62 : Merci pour ce code qui marche merveilleusement bien. Bon je n'ai pas tout compris mais ça marché et ça c'est génial :-) SI tu t'ennuie et que tu as envie de m'expliquer un peu le principe j'aime bien comprendre :-)
27/01/2014, 02h08
Muchos

Citation:

c'est sur la hauteur de l'objet (ici ma vidéo YOTUBE) qu'on veut travailler non?

Oui, mais on ne peut pas définir sur un objet une hauteur relative, si elle n'est relative à rien!
27/01/2014, 02h52
Yepazix

C'est pas faux ça mais alors comment le truc en Jqueri il s'y prends ?
Et puis aussi pourquoi ça marche avec une image et pas avec une fenêtre vidéo ?
27/01/2014, 07h57
Invité

En jQuery, la heuteur est calculée par rapport à la largeur, en proportion.

C'est une simple règle de trois.
A ne pas confondre avec le cheval...
27/01/2014, 12h24
Yepazix

Ah OK ça je comprends.
Mais l'image alors ? Comme celle qui est juste à côté de ma zone YOUTUBE, je lui dis juste 100 % de jaut et de large et elle se redimensionne bien ?
27/01/2014, 12h36
Invité

Parce que, à moins d'avoir spécifié les largeur/hauteur, le navigateur calcule automatiquement les dimensions par rapport aux dimensions réelles de l'image.
Si la largeur seule est spécifié (même à 100%), la hauteur est calculée en proportion.

Mais, comme l'a dit Muchos, indiquer 100% pour la hauteur n'est PAS pris en compte (-> teste sans).

Dans ton cas, il ne s'agit pas des dimensions de la vidéo, mais de l'<iframe>.
Une <iframe> affiche une page externe (à la page en cours). Elle n'en connait pas à l'avance les dimensions, ni les proportions.
Il faut donc lui spécifier ses deux dimensions.

Ici, en jQuery.
Le script calcule les dimensions de l'<iframe> en fonction de celles de la vidéo qu'elle doit contenir, et dont tu as donnée le ratio : 240/403.
28/01/2014, 23h02
Yepazix

OK cool je comprends.

Merci beaucoup :ccool: