3

Estoy haciendo una web que tiene un vídeo en la portada. El problema está en que el vídeo es demasiado alto, con lo cual hice el siguiente apaño:

Código CSS:

#video-container {
    height:85vh;
    overflow:hidden;
}

video {
    width: 100%;
    overflow:hidden;
}

codigo HTML:

<div id="video-container" class="row no-margin no-padding">
    <video autoplay loop muted>
        <source src="res/videos/video.mp4">
    </video>
</div>

No quiero se vean bordes al lado del Vídeo, es decir que ocupe la pantalla entera por los lados pero que no tenga el 100% de su altura ya que se sale de la pantalla en tal caso.

Por una parte una solución sería un vídeo con un formato que se adapte para ello, pero no tengo un vídeo de esas dimensiones y me tengo que buscar la vida.

La idea es que quede algo parecido a esto: https://www.ubreakifix.com/

También me gustaría poner unas letras por encima del vídeo pero no sé como se hace.

EDITO:

Añado una cosa que se me ha olvidado y es que así, tal y como está funciona bien en pantallas grandes, pero, al ponerlo en una pantalla de móvil en vertical, el espacio que queda debajo del vídeo es demasiado grande, y por eso necesito cambiar lo que tengo hecho.

1
  • editar el video no es una posibilidad?
    – lois6b
    Commented el 26 oct. 2016 a las 14:59

4 respuestas 4

1

Aquí lo puedes ver en pantalla completa.

CSS:

body{
  position: relative;
  margin: 0;
}

#video-container{
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: absolute;    
}

video {      
    width: 100%;
}

p {
  position: absolute;
  top: 5%;
  left: 10%;
  color: #fff;
  font: 5vw fantasy, serif;
}

HTML:

<div id="video-container" class="row no-margin no-padding">
    <video autoplay loop muted>
        <source src="http://techslides.com/demos/sample-videos/small.mp4">
    </video>
    <p>Lorem ipsum</p> <!-- Texto encima del video -->
</div>
0

prueba asi

<header id="video-container" class="row no-margin no-padding">
    <video autoplay loop muted>
        <source src="res/videos/video.mp4">
    </video>
</header>

en tu css

header{
    width: 100%;
    height : 100%;
    overflow:hidden;
}
9
  • Me hace lo mismo, además el vídeo en si no va en el header, aunque podría darse el caso de ponerlo ahí, pero no creo que sea buena idea, aunque acepto sugerencias.
    – Pavlo B.
    Commented el 26 oct. 2016 a las 15:04
  • pero a q bordes te refieres border del contenedor o o border del video como tal porque si es del contenedor los podrias quitar con style="border:none !important"
    – ingFR
    Commented el 26 oct. 2016 a las 15:07
  • Me refiero a que no quiero tener franjas negras en a los lados y abajo y arriba del vídeo.
    – Pavlo B.
    Commented el 26 oct. 2016 a las 15:09
  • puedes mostrar como queda el video haber si te puedo ayudar
    – ingFR
    Commented el 26 oct. 2016 a las 15:12
  • www.oneplayer.es/newop ahí lo puedes ver. No le prestes atencion a los demás detalles que fallan ya que en local lo tengo arreglado casi todo =)
    – Pavlo B.
    Commented el 26 oct. 2016 a las 15:13
0

Hola no se si te ayude de algo pero dentro de tu CSS ajustalo por el tamaño del dispositivo.

/*=============================================
ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
=============================================*/

@media (min-width:1200px){

AQUI COLOCAS CONFIGURACION PARA ESCRITORIO GRANDE
}

/*=============================================
ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
=============================================*/

@media (max-width:1199px) and (min-width:992px){
}

/*=============================================
ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
=============================================*/

@media (max-width:991px) and (min-width:768px){
}

/*=============================================
MOVIL (XS revisamos en 320px)
=============================================*/

@media (max-width:767px){
}

Dentro de cada bloque haces la configuracion que consideres pertinente de esta manera tienes un diseño responsivo espero que te sirva.

0

Aunque es tarde mi llegada, quiero compartir también mi forma de implementar este tipo de vídeo, ya sea como fondo, desplazado o fijo. Pero en este caso, hice una demostración solo para mostrar el vídeo de forma casi completa dentro del contenedor usando objet-fit: cover, lo cual creo yo es la única solución más fácil.

Aunque no sé a fondo la estructura de tu página y de como se implementará el vídeo, esto solamente servirá como punto de partida de una posible solución propia.

Simplemente tenemos el contenedor row del vídeo, a lo que debemos darle el ajuste adecuado con CSS para adaptar a la página. Yo le di un ancho máximo de 100% y una altura de 100vh (pantalla vertical completo) y restando con variables:

height: calc(100vh -100px)

Uso la altura total de la pantalla, pero le resto el header y el footer que da un total de 100px entre ambos (en esta demo).

Pero acá es donde puede ser complicado. Si en la página hay un objeto que sea fijo en la pantalla, entonces roba parte de la visibilidad del contenido debajo. En el caso de un móvil, si el menú de navegación esta en la pantalla (hablando del menú de Android), también roba visibilidad en la pantalla. Aunque es poco, no se vería una pequeña parte del video.

Lo siguiente es darle un toque al vídeo:

object-fit: cover

Con esta declaración el vídeo se muestra completamente en su contenedor sin dejar márgenes ni horizontal ni vertical. Si el vídeo es muy alto, se recorta arriba y abajo. Si el vídeo es ancho, se recorta a los lados. Pero todo de una forma "responsivo".

El resto de los estilos son para esta demo.

* {
box-sizing: border-box
}

:root {
--altura: 50px
}

html, body {
margin: 0;
padding: 0
}

body {
min-height: 100vh
}

header, footer {
display: block;
z-index: 1000;
width: 100%;
height: var(--altura);
background: #123
}

header {
position: sticky;
top: 0
}

.row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: calc(100vh - var(--altura));
overflow: hidden;
}

.row video {
display: block;
margin: auto;
width: 100%;
height: 100%;
object-fit: cover
}

.row .sobre {
disolay: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 1;
margin: auto;
width: 50%;
height: 50%;
border: 2px solid #123;
border-radius: 10px;
background-color: rgba(255,255,255, 0.5)
}

.row .sobre h1 {
display: block;
margin- auto;
margin-top: 50%;
margin-left: 50%;
text-align: center;
transform: translateX(-50%)
}
<header>
        <h1>header</h1>
    </header>
    
    <div id="video-container" class="row no-margin no-padding"> 
        
        <video autoplay loop muted> 
            <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">  
        </video> 
        
        <div class="sobre">
            <h1>Sobre el vídeo</h1>
        </div>
    
    </div>
    
    
    
    <footer>
        <h1>footer</h1>
    </footer>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.