Comunidad de diseño web y desarrollo en internet online

Video como fondo en HTML

Citar            
MensajeEscrito el 10 Jun 2016 04:34 am
Buenas noches.

Soy nuevo en el foro y tengo una duda, estoy comenzando con el diseño web y quiero lograr algo:

Tengo una seccion en mi pagina web lo cual tiene una imagen fija como fondo; es una seccion que tiene sus texto y un fondo:

background: url("../img/tg-black-bg4.jpg") no-repeat fixed top rgba(0,0,0,0.7);

Ahora quisiera saber si puedo cambiar ese JPG por una Video.mp4

Saludos.

Por thejesusp

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 10 Jun 2016 12:21 pm

Código :

<video src="http://www.url.video"></video>


Obviamente, a esto hay que colocarle estilos como: position, entre otros, y jugar con ellos para lograr lo que se quiere.

Por franqgeek

48 de clabLevel



Genero:Masculino  

Desarrollador Web

chrome
Citar            
MensajeEscrito el 13 Jun 2016 08:47 am

Por conectart

Claber

128 de clabLevel



 

ceo

chrome
Citar            
MensajeEscrito el 28 Jun 2016 05:08 pm
Hola ...

Lo que tenemos ahora con HTML5 es la propiedad de embeber un video es nuestra página web, para ponerlo de fondo queremos que se reproduzca y elimine información posible que puede generar youtube ... aqui te dejo una parte de como puedes meter tu video:

Código HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link href="./video-1.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <iframe id="video-background" width="560" height="315" src="//www.youtube.com/embed/Xxus7tBHxtc?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>
    </body>
</html>


Y en el css:

Código CSS :

body {
    margin: 0;
    padding: 0;
}

#video-background {
    height: 100%;
    position: fixed;
    width: 100%;
}


Tu puedes cambiar las propiedades height y width de acuerdo a tus necesidades, basicamente necesitas eso para ponerlo de fondo.

Te dejo una página dónde puedes encontrar información detallada ñ.ñ

Buen día

https://rolandocaldas.com/html5/video-de-fondo-en-html5

Por MichelleRivera

3 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.