percentage - tamaños - video.js tamaño para caber div

video js width

Question

Tengo un video en un div con un 40% de ancho. En el html, width="100%" height="auto" hace que el video desaparezca. Establecer un tamaño específico en píxeles no se ajustará a la div . Dejando el html en blanco, deja el video del tamaño incorrecto y con barras negras en los lados.

He intentado las sugerencias en la mayoría de las otras publicaciones, pero parece que no puedo hacer que funcione.

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

Answer 1

Acabo de encontrar esto: http://jsbin.com/idinaf/4/edit desde aquí http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

Espero que esto ayude a alguien.

edición: OMI, debería probar esto con algunos CSS simples:

width: 100% !important;
height: auto !important;

Answer 2

Aquí está el método que utilicé para solucionar este problema. Primero elimine cualquier declaración de tamaño en el objeto de video.

Establezca la propiedad de posición de su elemento contenedor en relativa.

.video_container {
  position: relative;
}

Agregue la imagen del póster al elemento que lo contiene y establezca su ancho en 100% y el alto en automático. Esto forzará a la división a ajustarse verticalmente a la altura de la imagen del póster (que si lo has hecho bien debería ser del mismo tamaño que tu video)

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

Ahora establezca la posición de .video-js en absoluta y establezca su altura y ancho en 100%. Esto hará que .video-js se adapte a la altura y el ancho de la imagen del póster que se está escalando de manera adecuada al div que lo contiene.

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

Si está obteniendo dinámicamente sus miniaturas de sus videos usando un servicio como Zencoder para generar miniaturas y permitir a los usuarios subir videos, esto asegurará que su video siempre se escale correctamente porque puede obtener dimensiones de la imagen que se escalarán proporcionalmente verticalmente.

Answer 3

En el HTML de la etiqueta de video, establezca el ancho y el alto en auto. Luego, con CSS, establezca el ancho / alto de la identificación del video en 100%.

Establecer los atributos de ancho y alto en automático hace que el reproductor funcione como un div, que no tiene dimensiones por defecto.

Answer 4

En la versión 5 de videojs puede usar la clase vjs vjs-16-9 vjs-4-3 en el objeto video,

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

o use fluid opción de fluid

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

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

Answer 5

Tienes que usar lo feo! Importante para anular la posición absoluta predeterminada del video:

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

Hecho esto, la imagen del póster se mostrará después del video, en lugar de sobre él, por lo que tendrá que corregirlo con:

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

Tenga en cuenta que debe tener la misma proporción que el video que desea que se muestre bien.

Answer 6

  video[poster]{
    object-fit: fill;
}

lo hizo por mí