Discussion :

[tepaze]

Bonjour,
Tout d'abord, je suis pas très au point en CSS....

Mon problème est le suivant, j'ai :
- 1 box contenante -> #conteneur
- 2 box à l'interieur dont :
- 1 que je maitrise -> #mask
- 1 qui est en inline-block que je ne gère pas (c'est un player videoJS) -> #video01

Code html :

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

1
2
3
4
5
6
<div id="conteneur">
  <div id="mask"></div>
  <div id="video01" class="video-js [...]"><!-- display: inline-block & position: relative obligatoire -->
    [...]
  </div>
</div>

Je voudrais que TOUTES les box aient tout le temps la même taille définit par la box #conteneur

J'ai essayer de bidouiller plein de truc, mais vraiment je ne suis pas fort... J'ai du mal à comprendre les différents positionnements et leurs implications... Çà me désole un peu d'ailleurs lorsque je vois ce qui est fait pas des balèze du CSS...

[mathieu]

vous indiquez que vous ne controlez pas le lecteur vidéo. est ce que ce lecteur a une largeur fixe et vous voulez que tout s'adapte ?
ou alors le lecteur prend la largeur maximale fixée par le bloc conteneur ?

[tepaze]

Merci pour votre intérêt.
Le lecteur prend la largeur maximale du conteneur quelques soit le format de la video (16:9 ou 4:3)
Je voudrais que la DIV mask prenne toujours la taille total du player
[Maj]
Un solution envisageable est que la box #conteneur soit la dimension de référence pour toutes les boxes contenues.

[mathieu]

si la taille du conteneur principal est fixée, les balises div devraient prendre la même largeur.
pouvez vous nous montrer l'url de la page où il y a ce souci pour qu'on puisse tester directement ?

[tepaze]

Bonjour Mathieu,
Je n'ai pas d'URL, c'est en local.
Toutefois j'ai trouvé. C'est un peu contraignant car cela m'oblige à avoir toujours le même format de video (16:9) mais étant donné que c'est la norme aujourd'hui... Et puis ce n'est qu'un pré-projet. Lorsque les contraintes ce présenterons, il sera temps de les traiter.
Au final j'applique ceci :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.mask{
	position: absolute;
	width: 100%;
	padding-top: 56.25%;
	float: left;
        z-index: 2;
	background-color: brown;
}
.video-js{
	float: left;
}

Il peut y avoir plusieurs mask pour 1 video-js
Je veux que tout ce suppertose, d'ou le float: left appliqué à tous.
N'hésitez pas à me corriger si besoin.

[NoSmoking]

Bonjour,
il aurait été intéressant de savoir ce que faisait ton player videoJS car il suffit avec le code HTML suivant :

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="video-wrapper">
  <div id="video01" class="video-js [...]">  <!-- on pourrait supprimer -->
    <video controls>
      <source src="../video.webm" type="video/webm" />
    </video>
  </div>
  <div class="mask">
  </div>
</div>

... d'appliquer le CSS :

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
.video-wrapper {
  position: relative;
  width: 75%;           /*-- pour voir au redimensionnement --*/
}
.video-wrapper .mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: radial-gradient(transparent 50%,#F00);
  pointer-events: none;
}
.video-wrapper video {
  display: block;
  width: 100%;
}

... pour ne rien à avoir à faire de plus, le conteneur s'adapte et la vidéo aussi en cas de redimensionnement. Le « mask » lui suivra quoiqu'il arrive.

C'est très souvent largement suffisant.