Hola, alguien sabe cómo adaptar el poster a la misma anchura y altura que la del video?
La premisa es que, el video en sí NO tiene una anchura y altura fijas, si no que tiene un "width" relativo.
Para ilustrarlo mejor, os pongo el código:
HTML5:
<div class="multimedia">
<video controls poster="video/6.jpg" preload="auto">
<source src="video/bar.mp4"><p>Lo sentimos, la version de su navegador no permite visualizar videos en HTML.</p>
</video>
</div>
CSS:
.multimedia
{
margin: 0 auto 5% auto;
display: block;
width: 95%;
border: 1px solid #fff;
}
.multimedia video
{
margin: 0 auto;
text-align: center;
width: 100%;
}
Con esto, lo que consigo es que el video tenga un ancho fluido (no fijo) como decía, si no que se adapte al contenedor padre denominado "multimedia" (que a su vez ocupa un 95% de la sección que lo aloja).
Esto es OK, sin embargo, no consigo que la foto "6.jpg" declarada a través de la etiqueta "poster" ocupe el 100% (del div "multimedia"), si no que se muestra tan ancho como la foto lo es en realidad.
Agradecería si alguien sabe cómo hacerlo, que lo comparta.
Gracias!!
Lacoluco
La premisa es que, el video en sí NO tiene una anchura y altura fijas, si no que tiene un "width" relativo.
Para ilustrarlo mejor, os pongo el código:
HTML5:
<div class="multimedia">
<video controls poster="video/6.jpg" preload="auto">
<source src="video/bar.mp4"><p>Lo sentimos, la version de su navegador no permite visualizar videos en HTML.</p>
</video>
</div>
CSS:
.multimedia
{
margin: 0 auto 5% auto;
display: block;
width: 95%;
border: 1px solid #fff;
}
.multimedia video
{
margin: 0 auto;
text-align: center;
width: 100%;
}
Con esto, lo que consigo es que el video tenga un ancho fluido (no fijo) como decía, si no que se adapte al contenedor padre denominado "multimedia" (que a su vez ocupa un 95% de la sección que lo aloja).
Esto es OK, sin embargo, no consigo que la foto "6.jpg" declarada a través de la etiqueta "poster" ocupe el 100% (del div "multimedia"), si no que se muestra tan ancho como la foto lo es en realidad.
Agradecería si alguien sabe cómo hacerlo, que lo comparta.
Gracias!!
Lacoluco