¿Cómo hacer que el video de fondo ocupe toda la pantalla?

[JoseZabaleta]

Hola Compañeros...

He creado una página con un vídeo de fondo a pantalla completa... mediante el siguiente código:

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/wJ20UfJg7hk?rel=0&controls=0&showinfo=0&autoplay=1&loop=9&autohide=1">
</iframe>
</div>

Pero como se aprecia en la siguiente imagen, el vídeo ocupa todo el alto de la pantalla, pero no todo el ancho:





Se me ocurre que puede ser debido a que se respetan las proporciones... y tras cubrir el alto, el ancho llega hasta donde llega...

Aunque quizá me falta algo en el código... o se puede hacer de otra manera...

GRACIAS por vuestra ayuda... Abrazo...

 

[erniecastle]

Para que el video se muestre en toda la pantalla es necesario que tenga un buen ancho y largo, tus width y height, estan bien al 100%, pero posiblemente la pantalla tiene más ancho que el mismo video el div debe de estas justo despues del primer body y seria algo como esto:

<div style="margin: 0; text-align: center;">
<video style="height: auto; width: 100%;" controls="" autoplay="">
<source src="videos/hellothere.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

Saludos.

 

[DianaSantana]

Despues de colocar las etiquetas en el orden correcto, copia y pega esto:

<video preload autoplay poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Tu navegador no soporta HTML5 Video
</video>

Y un style:

video {
background-size: cover;
bottom: 0;
height: auto;
min-height: 100%;
min-width: 100%;
position: fixed;
right: 0;
width: auto;
z-index: -100;
}

Espero te funcione igual que a mi.
Saludos!

 

[JoseZabaleta]

Para que el video se muestre en toda la pantalla es necesario que tenga un buen ancho y largo, tus width y height, estan bien al 100%, pero posiblemente la pantalla tiene más ancho que el mismo video el div debe de estas justo despues del primer body y seria algo como esto:

<div style="margin: 0; text-align: center;">
<video style="height: auto; width: 100%;" controls="" autoplay="">
<source src="videos/hellothere.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

Saludos.

GRACIAS ernie... Observo en tu código, que se trata de un vídeo mp4 alojado en el propio Sitio... En mi caso se trata de un vídeo alojado en Youtube... por lo que me pregunto si las dimensiones del vídeo original, antes de subirlo a Youtube, tiene alguna importancia... En cualquier caso, he probado con ese código, añadiendo en source la url de mi vídeo en Youtube... y el resultado es una página en blanco... ni vídeo... ni contenido...

Supongo por tanto, que ese código solo sirve para vídeos alojados en el propio servidor... ¿correcto?

Gracias de nuevo... Feliz Presente... Abrazo...

- - - Actualizado - - -

Despues de colocar las etiquetas en el orden correcto, copia y pega esto:

<video preload autoplay poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Tu navegador no soporta HTML5 Video
</video>

Y un style:

video {
background-size: cover;
bottom: 0;
height: auto;
min-height: 100%;
min-width: 100%;
position: fixed;
right: 0;
width: auto;
z-index: -100;
}

Espero te funcione igual que a mi.
Saludos!

GRACIAS Diana... ¿A qué "etiquetas en el orden correcto" te refieres?

Como le he comentado a ernie, supongo que ese código con la etiqueta <video> no sirve para vídeos alojados en Youtube, como es mi caso... ¿Correcto?

Gracias... Abrazo...

 

[DianaSantana]

Perfecto, mira el codigo aui como lo quieres



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>

// Reemplaza ID con el código ID de tu vídeo de Youtube
</body>
</html>

<!----- Colocando el ID del video el codigo queda asi-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe autoplay frameborder="0" height="100%" width="100%"
src="https://youtube.com/embed/Zmal84YupgM?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
// Reemplaza ID con el código ID de tu vídeo de Youtube
</body>
</html>


Nota: El ID del vide es esta parte :

 

[JoseZabaleta]

Hola Diana... Verás que el código que estoy utilizando y comparto en mi primer mensaje, es exactamente el que compartes (a no ser que se me haya esccapado algo) Y como decía,y mostré mediante una captura de pantalla, el vídeo no ocupa el ancho completo... probablemente debido a que la dimensión width del vídeo original no es suficiente... ¿Se solucionaría si la dimensión width del vídeo antes de subirlo a Youtube fuera mayor?

Gracias... Abrazo...

 

[DianaSantana]

Hola Diana... Verás que el código que estoy utilizando y comparto en mi primer mensaje, es exactamente el que compartes (a no ser que se me haya esccapado algo) Y como decía,y mostré mediante una captura de pantalla, el vídeo no ocupa el ancho completo... probablemente debido a que la dimensión width del vídeo original no es suficiente... ¿Se solucionaría si la dimensión width del vídeo antes de subirlo a Youtube fuera mayor?

Gracias... Abrazo...

Perfecto, ya entendi! mira creo que si le agregas un estilo para eliminar los padding y margin por defecto que aveces tiene la pagina , lo resuelves.

<style media="screen">
body{
padding: 0!important;
margin: 0!important;
}
</style>
Esto debe funcionarte porque elimina todo los espacios...

 

[JoseZabaleta]

Gracias Diana... Ya lo había probado, pero aunque el alto es completo, el ancho no se cubre... Supongo que es debido a que se respetan las proporciones del vídeo original... se cubre el alto... y el ancho llega hasta donde llega...

Abrazo...

 

[erniecastle]

Hola Jose por que no optas por descargar el video y adjuntarlo en tu propio servidor, de igual manera es una buena solución y así no dependes de un tercero.

Saludos.

 

[Sindulfo Santacruz]

es que tiene sentido que una vez llegado al 100 en uno de los parametros, no siga ampliando el margen del siguiente (alto y largo), ya que esto causaría la distorsión de la relación del vídeo.

Si lo que buscas es que exista esa distorsión, pues no manejes por el porcentaje, sino que averiguas por otros medios tanto el ancho como el largo y lo pones específicamente como parámetro al video (logrando así la distorsión buscada)

espero haberme explicado.

 

[JoseZabaleta]

Hola Jose por que no optas por descargar el video y adjuntarlo en tu propio servidor, de igual manera es una buena solución y así no dependes de un tercero.

Saludos.

Hola Ernie... El objetivo del Sistema "Internet Marketing Fractal 7.0" es que sea descargado por el visitante y duplicado en su propio dominio... por lo que si tiene éxito, con el tiempo, habrá miles de páginas con ese vídeo de fondo... Y si ese vídeo está alojado en mi hosting, supongo que eso podría llegar a ser problemático... Para evitar problemas prefiero que esté alojado en Youtube...

Podría alojarlo en mi hosting para utilizarlo en el Sistema original, y que el resto de fractales utilicen el vídeo de Youtube...

¿Se entiendo lo que quiero decir?

Gracias por vuestros consejos... Abrazo...

- - - Actualizado - - -

es que tiene sentido que una vez llegado al 100 en uno de los parametros, no siga ampliando el margen del siguiente (alto y largo), ya que esto causaría la distorsión de la relación del vídeo.

Si lo que buscas es que exista esa distorsión, pues no manejes por el porcentaje, sino que averiguas por otros medios tanto el ancho como el largo y lo pones específicamente como parámetro al video (logrando así la distorsión buscada)

espero haberme explicado.

Gracias siscon... Lo que busco es que el vídeo ocupe toda la pantalla... en cualquier pantalla en que se visualice la página... a ser posible sin distorsión...

Abrazo...

 

[Sindulfo Santacruz]

Gracias... Lo que busco es que el vídeo ocupe toda la pantalla... en cualquier pantalla en que se visualice la página... a ser posible sin distorsión...

Abrazo...

Lo que pides es imposible... o (A) - te ajustas a las medidas del video o (B) - te ajustas a las medidas de la pantalla en donde muestras el video.
Si (A) entonces vas a obtener lo que ahora tienes
si (B) vas a tener distorsión

Tu eliges.,,, piénsalo.

 

[JoseZabaleta]

Lo que pides es imposible... o (A) - te ajustas a las medidas del video o (B) - te ajustas a las medidas de la pantalla en donde muestras el video.
Si (A) entonces vas a obtener lo que ahora tienes
si (B) vas a tener distorsión

Tu eliges.,,, piénsalo.

Gracias...

El theme que utilizo actualmente en mi Sitio, me permite poner un vídeo como fondo de una sección... e independientemente de las dimensiones del vídeo y de la pantalla, el vídeo ocupa toda la sección...

Y cuando subes un vídeo a Youtube, independientemente de las dimensiones del vídeo y de la pantalla, al maximizarlo ocupa toda la pantalla...

Pienso que en cuestiones tecnológicas nada es imposible... aunque es posible que no se encuentre dentro de mis posibilidades...

Gracias de nuevo...

 

[Sindulfo Santacruz]

Si tienes una pantalla con ratio de resolución de 16:9 y tienes un video con ratio (por decir) 5:4, es imposible mostrar a pantalla completa sin que exista distorsión.

O se muestra a full screen y se distorsiona.
O se muestra en el ratio (aspecto original) y lo que no entra, se rellena con espacios en negro.

A más de uno le habrá pasado que ven un video con calidad de cine y arriba y abajo está de color negro, eso se hace para no distorsionar el video original.

Y no pasa por las cuestiones tecnológicas, sino por los hechos.

 

[JoseZabaleta]

Si tienes una pantalla con ratio de resolución de 16:9 y tienes un video con ratio (por decir) 5:4, es imposible mostrar a pantalla completa sin que exista distorsión.

O se muestra a full screen y se distorsiona.
O se muestra en el ratio (aspecto original) y lo que no entra, se rellena con espacios en negro.

A más de uno le habrá pasado que ven un video con calidad de cine y arriba y abajo está de color negro, eso se hace para no distorsionar el video original.

Y no pasa por las cuestiones tecnológicas, sino por los hechos.

Así será... pero imagino que cuando subes un vídeo a Youtube... este llevará cabo determinados procesos a la hora de publicarlo, para que después cualquier pueda verlo correctamente a pantalla completa en cualquier dispositivo...

Si no he entendido mal, mediante los códigos compartidos por erniecastle y DianaSantana, el vídeo se ve a pantalla completa independientemente de sus dimensiones (aunque quizá distorsionado)

Gracias...

 

[Sindulfo Santacruz]

Así será... pero imagino que cuando subes un vídeo a Youtube... este llevará cabo determinados procesos a la hora de publicarlo, para que después cualquier pueda verlo correctamente a pantalla completa en cualquier dispositivo...

-... eerrhhhh

no sucede eso que dices.

Pero bueno. Hasta aquí llegó mi humilde aporte.

Mis respetos...

:encouragement::encouragement::encouragement::encouragement:

 

[JoseZabaleta]

-... eerrhhhh

no sucede eso que dices.

Pero bueno. Hasta aquí llegó mi humilde aporte.

Mis respetos...

:encouragement::encouragement::encouragement::encouragement:

Más humildes son mis aportes... pues carezco de conocimientos sobre la materia... pero diría que cuando veo vídeos en Youtube a pantalla completa, los veo sin distorsión...

Mi respeto y agradecimiento...

 

[JoseZabaleta]

Hola...

En FullScreen YouTube Video Background In Pure CSS se comparte el código html y css necesario para colocar un vídeo de Youtube como fondo en pantalla completa... Y este es el resultado: Internet Marketing Fractal 7.0 Marketing En Red Marketing Online

No sé si se distorsiona... pero no he notado mucha diferencia...

Feliz semana... Abrazo...

 

[JoseZabaleta]

Hola Compañeros... Me gustaría bajar o eliminar el audio del vídeo de fondo... He buscado si se puede hacer desde el código que pone el vídeo como fondo de la página, pero creo que no existe esa posibilidad... Y también estoy mirando si puede hacerse en Youtube, pero no encuentro la forma... ¿Alguien sabe si puede hacerse?

Gracias... Abrazo...

 

[JoseZabaleta]

Hola Compañer@s... Se hace de la siguiente manera: desde "Gestor de vídeos", en el vídeo en cuestión, "editar - mejoras", vas al "editor de vídeo de Youtube", arrastras el vídeo que deseas editar, pinchas sobre el vídeo arrastrado, y aparece un menú en el que se encuentra "audio", donde puedes variar el volumen entre otras características...

Eso sí, la edición no varía el vídeo original, sino que crea un nuevo vídeo...

Gracias a tod@s... Feliz semana... Abrazo...