web-dev-qa-db-fra.com

taille video.js pour adapter div

J'ai une video dans une div avec une largeur de 40%. Dans le code HTML, width="100%" height="auto" fait disparaître la vidéo. Définir une taille spécifique en pixels ne correspondra pas à la div. Si vous laissez le code html vide, la vidéo présente une taille incorrecte et des barres noires sur les côtés 

J'ai essayé les suggestions de la plupart des autres articles, mais je n'arrive pas à le faire fonctionner. 

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto" width="auto" height="auto" poster="images/reelthumbnail.jpg"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>
percentagevideo.js
20
user2671810

Dans la version 5 de videojs, vous pouvez utiliser la classe vjs-16-9vjs-4-3 sur un objet vidéo, 

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

ou utilisez l'option fluid 

<video class="video-js vjs-default-skin" data-setup='{"fluid": true}' ...>
...
</video>

Source: https://coolestguidesontheplanet.com/videodrome/videojs/

33
adam187

Vous devez utiliser le paramètre laid! Important pour remplacer le positionnement absolu par défaut de la vidéo: 

.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

Ceci fait, l’affiche s’affichera après la vidéo, au lieu de la recouvrir. Vous devez donc la corriger avec:

.vjs-poster {
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Notez qu'il doit avoir le même rapport que la vidéo pour que vous puissiez l'afficher correctement.

17
GentleFish

Dans le code HTML de la balise video, définissez la largeur et la hauteur sur auto. Ensuite, avec CSS, définissez la largeur/hauteur de l'ID de la vidéo sur 100%. 

Si vous définissez les attributs width et height sur auto, le lecteur fonctionnera comme un div, qui n'a aucune dimension par défaut. 

6
heff

Voici la méthode que j'ai utilisée pour résoudre ce problème. Commencez par supprimer toute déclaration de taille sur l'objet vidéo.

Définissez la propriété de position de votre élément contenant sur relative.

.video_container {
  position: relative;
}

Ajoutez l'image affiche à l'élément contenant et définissez sa largeur sur 100% et sa hauteur sur auto. Cela forcera la div à se redimensionner elle-même verticalement à la hauteur de l'image de l'affiche (qui, si vous l'avez bien faite, devrait avoir la même taille que votre vidéo).

.video_container img.poster {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
}

Définissez maintenant la position de .video-js sur absolue et définissez sa hauteur et sa largeur sur 100%. Cela entraînera une réduction de .video-js à la hauteur et à la largeur de l’image d’affichage qui s’adapte de manière appropriée à la division qui les contient.

.video_container .video-js {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;
}

Si vous obtenez dynamiquement vos vignettes de vos vidéos en utilisant un service tel que Zencoder pour générer des vignettes et permettre aux utilisateurs de télécharger une vidéo, cela garantira que votre vidéo est toujours correctement redimensionnée, car vous pouvez obtenir des dimensions de l'image proportionnelles verticalement.

3
Stubby

Je viens de trouver ceci: http://jsbin.com/idinaf/4/edit à partir d'ici http://daverupert.com/2012/05/making-video-js-fluid-for- rwd/

espérons que cela aide quelqu'un.

edit: IMO, vous devriez juste essayer ceci avec quelques CSS simples:

width: 100% !important;
height: auto !important;
1
yogee
  video[poster]{
    object-fit: fill;
}

l'a fait pour moi

0
Dan Ochiana