Question à propos de la création d'un calque...

df34rt · 4 Novembre 2008

Bonjour,

J'ai une petite question à propos de la mise en page de mon site, enfin plutôt de la création d'un calque !

Quand j'intègre une vidéo à mon blog, ça donne ça : c'est assez brut je trouve !

A contrario des autres, Wat propose un petit cadre, comme ceci qui rend moins brutal l'intégration :

Je pense, qu'il y a moyen, à l'aide d'un calque (div ou-je-ne-sais-quoi) il y a moyen de faire un cadre de ce genre pour toutes les vidéos en modifiant aussi le css.

Quelqu'un aurait une idée ?
Mille mercis d'avance,
Thomas.

tryan · 4 Novembre 2008

Salut,
Il suffit de rajouter une class à la balise "div" donné dans le code de dailymotion.

<div class="cadre"><object height="336"...

Puis tu ajoute le style css soit dans une feuille de style soit entre les balises <head></head> de ton document:

Code:

<style>
.cadre {border: 1px solid #000;
width: 422px;
height:338px;
padding:5px;
}
  </style>

et sa devrait le faire ^^.

df34rt · 4 Novembre 2008

Bonsoir,

Merci d'avoir pris le temps de répondre, cependant ça ne marche pas comme il le faut

!

Voila déjà un aperçu sur une vidéo youtube :

Les problèmes :

- Comme on peut le voir, la taille n'est pas bonne, mais peut-être faut-il créer plusieurs class pour les différents sites de partage de vidéo (la taille n'est pas exactement la même).
- Le cadre n'est pas centrer (à droite & à droite pas même distance, en bas il est carrément "mangé")
- Quand j'utilise <div class="cadre">, je ne peux plus aligner la vidéo au centre de l'article. En effet "<div class="cadre" style="text-align: center;">" ne centre plus la vidéo comme <div style="text-align: center;"> le fait.

Voila,
Merci encore

!

tryan · 4 Novembre 2008

Bon, je ne suis pas une flèche en css ^^...
Je pense qu'il faudrait un style différent applicable pour chaque "vidéo"

Code:

  <style>
.cadre {
text-align:center;
border: 1px solid #000;
padding:5 5 5 5;
width:450px;
}
  </style>

Tu règle la taille width selon chaque lecteur et tu case le tout entre <center></center>

Code:

<center>
<div class="cadre"><object height="336"... 
</div>
</center>

logan0015 · 5 Novembre 2008

Bonjour,

A priori avec le même CSS mais sans préciser de tailles définies (pas de width et pas de height) ça devrait marcher pour toutes les tailles de vidéos.

Le code deviendrait simplement :

Code:

  <style>
.cadre {
text-align:center;
border: 1px solid #000;
padding:5px;
}
  </style>

[/code]

Je me demande même si le text-align est vraiment nécessaire...

bproductiv · 5 Novembre 2008

tryan a dit:
Tu règle la taille width selon chaque lecteur et tu case le tout entre <center></center>

Surtout pas de center !! c'est une vieille balise dépréciée.

df34rt · 5 Novembre 2008

logan0015 a dit:
Bonjour,

A priori avec le même CSS mais sans préciser de tailles définies (pas de width et pas de height) ça devrait marcher pour toutes les tailles de vidéos.

Le code deviendrait simplement :

Code:

<style> .cadre { text-align:center; border: 1px solid #000; padding:5px; } </style>

Je me demande même si le text-align est vraiment nécessaire...

Bonjour,

Merci, j'ai essayé mais avec ce code là, le résultat était le même (toujours décalage...) et la vidéo toujours pas centrée.

J'ai donc, pris un vieil article, pour pouvoir vous montrer en temps réel et pas sur une image.

En bidouillant le code de la vidéo, j'arrive à ça :
http://www.blog-marrant.com/videos-marr ... aible.html

Il manque juste le cadrage droite-gauche...

PS : Tryan... en effet <center> est prohibé depuis plusieurs mois (années ?)

!

tryan · 5 Novembre 2008

bproductiv a dit:
tryan a dit:

Tu règle la taille width selon chaque lecteur et tu case le tout entre <center></center>

Cliquez pour agrandir...

Surtout pas de center !! c'est une vieille balise dépréciée.

Ha, je ne savais pas ^^, c'est dommage, sa règle bien des problèmes...

Et en attribuant le style directement à la balise object, sa ne marche pas non plus ?

Code:

  <style>
object {
text-align:center;
border: 1px solid #000;
padding:5px;
display: block;
}
  </style>

df34rt · 5 Novembre 2008

Non, aucun changement ! (pourtant j'ai rajouté un "." devant "object {" car il me semble qu'il en faut un) !

tryan · 5 Novembre 2008

Bhin là je déprime ^^.

Dans ce cas, j'attribuerais un style différent selon la vidéo auquel je changerais uniquement la taille de l'attribut width pour coller parfaitement au lecteur.
<style>
.cadre {
text-align:center;
border: 1px solid #000;
padding:5px;
width: taille à règler;
}
</style>

Ce que je ne pige pas, c'est pourquoi la hauteur du lecteur+padding est ok et qu'à l'inverse, la largeur "s'étale".

En faisant sa sa fonctionne:

Code:

  <style>
.cadre {
text-align:center;
border: 1px solid #000;
padding:5px;
display: block;
width:425px;
}
  </style>
...
<div class="cadre">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
 height="355" width="450"><param name="wmode"
 value="transparent"><param name="src"
 value="https://www.youtube.com/v/hsy7C5Ee-cQ&amp;rel=1">
<embed type="application/x-shockwave-flash"
 src="https://www.youtube.com/v/hsy7C5Ee-cQ&amp;rel=1"
 wmode="transparent" height="355" width="425"></object></div>

Jaunalgi · 5 Novembre 2008

Ta vidéo sous Firefox est plus petite: 425px contre 450px sous IE. Les largeurs déclarées sont différentes entre <object> et <embed> dans ton cas de figure.

En assumant que toutes tes vidéos qui auront la classe .cadre auront 450px de largeur, tu peux utiliser ça:

Code:

<style type="text/css">
.cadre embed {
	width:450px;
}
.cadre {
	padding:5px;
	border:solid 1px #333;
	width:450px;
}
</style>

Le .cadre embed force la largeur de la vidéo à 450px sous Firefox. Dans l'exemple que tu as donné, ça fonctionne.

df34rt · 5 Novembre 2008

En effet, ça marche pour IE7 et Firefox, par contre, ce n'est plus centré, normal ?

Merci beaucoup.

logan0015 · 5 Novembre 2008

rajoute dans le css :

margin : 10px auto;

Ce qui définira les marges de la vidéo à 10 pixels en haut et en bas, et laissera le navigateur ajuster automatiquement à droite et à gauche (donc le bloc sera centré normalement).

df34rt · 6 Novembre 2008

Bonsoir logan0015,

Je crois qu'on y arrive et.... oui à 95%

!

Sous FF et IE7, c'est impeccable, merci beaucoup !

Par contre, Chrome :s (bien qu'il ne soit pas très populaire) !

Jaunalgi · 6 Novembre 2008

Effectivement, Chrome n'a pas pris en compte le

Code:

.cadre embed {
   width:450px;
}

Du coup, sans modifier ton code, je ne vois pas. Le plus serait de mettre ta vidéo directement à la bonne taille:

Code:

<embed type="application/x-shockwave-flash" width="[color=red]450[/color]" height="355" src="https://www.youtube.com/v/hsy7C5Ee-cQ&amp;rel=1" wmode="transparent"></embed>

Tout en laissant le code CSS donné plus haut pour les fois où tu oublies de le mettre à la bonne taille, sait-on jamais!

df34rt · 8 Novembre 2008

D'accord, j'essaierais.

Si quelqu'un a une "vraie solution", je ne suis pas contre

!

Merci Jaunalgi et les autres !