Iframe/vidéo qui ne se redimensionne pas

**Yepazix** · 25/01/2014, 01h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ...

**Muchos** · 25/01/2014, 08h16

Merci de donner le lien de votre site en ligne, pas de votre serveur local

**Yepazix** · 25/01/2014, 11h44

oops

voila :

http://espaceimy.cluster010.ovh.net/jdw_test_beta_2/

**Muchos** · 26/01/2014, 03h08

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).

**Yepazix** · 26/01/2014, 14h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

alors j'obtiens ceci :
Nom : bon.jpg
Affichages : 787
Taille : 148,1 Ko

(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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais alors j'obtiens ceci (que tu as aussi normalement) :
Nom : pasbon.jpg
Affichages : 791
Taille : 144,8 Ko

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 ?

**Muchos** · 26/01/2014, 20h06

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 :

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
<!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

Invité · 26/01/2014, 21h12

Bonjour,
un peu de jQuery :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Yepazix** · 26/01/2014, 23h06

@ 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 :-)

**Muchos** · 27/01/2014, 02h08

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!

**Yepazix** · 27/01/2014, 02h52

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 ?

Invité · 27/01/2014, 07h57

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...

**Yepazix** · 27/01/2014, 12h24

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 ?

Invité · 27/01/2014, 12h36

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.

**Yepazix** · 28/01/2014, 23h02

OK cool je comprends.

Merci beaucoup

Iframe/vidéo qui ne se redimensionne pas [HTML 5]

HTML

Discussions similaires

Partager

Partager