taille de video.js pour s'adapter à div

J'ai un video dans un div avec un 40% de la largeur. Dans le html, width="100%" height="auto" rend la vidéo disparaissent. Définition d'une taille spécifique en pixels ne sont pas adaptées à la div. En laissant le code html vide laisse la vidéo de la bonne taille et avec des barres noires sur les côtés.

J'ai essayé les suggestions dans la plupart des autres postes, mais 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>

source d'informationauteur user2671810

  1. 18

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

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

    ou de l'utilisation fluid option 

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

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

  2. 16

    Vous devez utiliser le laid !important de remplacer la valeur par défaut positionnement absolu de la vidéo : 

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

    Ce fait, l'image d'affiche s'affiche après la vidéo, au lieu d'elle, donc vous devez les fixer avec :

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

    Noter qu'il doit avoir le même ratio de la vidéo, vous souhaitez qu'il affiche bien.

  3. 5

    Dans le code HTML de la balise vidéo de définir la largeur et la hauteur de l'auto. Puis CSS pour définir la largeur/hauteur de la vidéo ID à 100%.

    Réglage de la largeur et de la hauteur des attributs de l'auto, le joueur de travail comme un div, qui n'a pas de dimensions par défaut.

  4. 3

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

    Définir votre contenant de l'élément de propriété position relative.

    .video_container {
  position: relative;
}

    Ajouter l'image d'affiche à l'élément contenant et de définir sa largeur à 100% et la hauteur de l'auto. Cela va forcer la div pour la taille elle-même à la verticale à la hauteur de l'affiche de l'image (qui, si vous l'avez fait à droite doit être de la même taille que votre vidéo)

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

    Maintenant de définir la position de .vidéo-js absolu et de définir la hauteur et la largeur à 100%. Ce sera la cause .vidéo-js à l'échelle de la hauteur et la largeur de l'affiche de l'image qui est mise à l'échelle elle-même de manière appropriée à la div contenant.

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

    Si vous êtes de manière dynamique l'obtention de votre des vignettes à partir de vos vidéos en utilisant un service comme Zencoder pour générer les vignettes et permettant aux utilisateurs de télécharger la vidéo cela permettra d'assurer que votre vidéo est toujours mis à l'échelle correctement parce que vous pouvez obtenir les dimensions de l'image qui sera proportionnel à la verticale.

  5. 1

    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ère que cela aide quelqu'un.

    edit: OMI, vous devriez essayer juste un peu de CSS simple:

    width: 100% !important;
height: auto !important;
  6. 0
      video[poster]{
    object-fit: fill;
}

    l'a fait pour moi