Poner un video en modo background en una Página Web con HTML5 y CSS

Poner un vídeo como fondo(background) de una página web con HTML5 usando CSS. HTML5 se ha vuelto algo natural para los navegadores modernos y es importante aprovechar todas las ventajas que nos ofrecen hoy en día.

¿Como poner un video en modo background en una pagina web?

En este tutorial hemos utilizado la etiqueta  

Ahora solo debemos añadir el siguiente fragmento de código en la página o documento donde quieren que un vídeo se convierta como fondo de una pagina web.

<video id="my-video" class="video" autoplay muted loop>
   <source src="videos/video.mp4" type="video/mp4">
</video>

Si ya tienes una documento CSS o estas por crearla. Dentro del archivos .CSS coloca el siguiente linea de código.

 

div, h1, p, a, video, h2{
    z-index: 2;
    position: relative;
}
.content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.content__heading {
  margin-bottom: 24px;
  color: rgb(39,39,39);
  font-size: 44px;
}

.content__teaser {
  margin-bottom: 24px;
  color: rgb(89,89,89);
  font-size: 22px;
}

.content__cta {
  display: inline-block;
  margin: 0;
  padding: 12px 48px;
  color: rgb(255,60,100);
  font-size: 22px;
  text-decoration: none;
  border: solid 4px rgb(255,60,100);
}

.video {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

Después de hacer lo siguiente, podrá ver los cambios realizados.

La propiedades del reproductor de video HTML5 tiene los siguiente. autoplay muted loop

Estilo Home de facebook usando HTML y CSS

Como crear un diseño web similar al home o incio de facebook usando HTML y CSS. En mi caso, hice lo siguiente.

  • Crear un archivo HTML con el nombre homepage.html o index.html.
  • Dentro del archivo creado, ponga las siguientes lineas de etiquetas html.
  • Guarde los cambios
<html>
<head>
<link href="homepage_style.css" type="text/css" rel="stylesheet"/>
</head>
<body>

<div id="header_wrapper">
 <div id="header">
 <li id="sitename"><a href="https://lenguajemaquina.com">lenguajemaquina.com</a></li>
 <form action="post">
 <li>Email or Phone<br><input type="text" name="email"></li>
 <li>Password<br><input type="password" name="password"><br><a href="">Forgotten account?</a></li>
 <li><input type="submit" name="login" value="Log In"></li>
 </form>
 </div>
</div>

<div id="wrapper">

<div id="div1">
<p<Talkerscode helps you connect and share with the <br>people in your life.</p>
<img src="images/fb_map_image.png">
</div>

<div id="div2">
<h1>Create an account</h1>
<p>It's free and always will be.</p>
<li><input type="text" placeholder="First Name" id="firstname"><input type="text" placeholder="Surname" id="surname"></li>
<li><input type="text" placeholder="Mobile number or email address"></li>
<li><input type="text" placeholder="Re-enter mobile number or email address"></li>
<li><input type="password" placeholder="New password"></li>
<p>Birthday</p>
<li>
<select><option>Day</option></select>
<select><option>Month</option></select>
<select><option>Year</option></select>
<a href="">Why do I need to provide my date of birth?</a>
</li>
<li><input type="radio">Female <input type="radio">Male</li>
<li id="terms">By clicking Create an account, you agree to our <a href="">Terms</a> and that <br>you have read our <a href="">Data Policy</a>, including our <a href="">Cookie Use</a>.</li>
<li><input type="submit" value="Create an account"></li>
<li id="create_page"><a href="">Create a Page</a> for a celebrity, band or business.</li>
</div>

</div>

<div id="footer_wrapper">

<div id="footer1">
English (UK) <a href="">हिन्दी</a><a href="">ਪੰਜਾਬੀ</a><a href=""> اردو</a><a href="">தமிழ்</a><a href="">বাংলা</a><a href="">मराठी</a><a href="">తెలుగు</a><a href="">ગુજરાતી</a><a href="">ಕನ್ನಡ</a><a href="">മലയാളം</a>
</div>
<div id="footer2">
<a href="">Sign Up</a><a href="">Log In</a><a href="">Messenger</a><a href="">Talkerscode</a><a href="">Mobile</a><a href="">Find Friends</a><a href="">Badges</a><a href="">People</a><a href="">Pages</a><a href="">Places</a><a href="">Games</a><a href="">Locations</a><a href="">Celebrities</a><a href="">Groups</a><a href="">Moments</a><a href="">About</a><a href="">Create Advert</a><a href="">Create Page</a><a href="">Developers</a><a href="">Careers</a><a href="">Privacy</a><a href="">Cookies</a><a href="">Ads</a><a href="">Terms</a><a href="">Help</a>
<p>Design By TalkersCode.com</a>
</div>

</div>
</body>
</html>

En este paso creamos tres div principal de tres secciones de la página principal y de la cabecera principal, envoltura y pie de página y añadir todos los contenidos ya que es como facebook.

  • Despues de crear el archivo anterior y rellenarlo de códigos, ahora toca crear el archivo CSS con el nombre homepage_style.css
  • Rellene el archivo homepage_style.css con las siguientes lineas de códigos.
  • Guarde lo cambios
body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
 background: linear-gradient(white, #D3D8E8);
}
#header_wrapper
{
 width:100%;
 min-width:980px;
 background-color:#4c66a4;
}
#header
{
 width:980px;
 margin:0px auto;
 padding:0px;
 height:85px;
}
#header li
{
 list-style-type:none;
 float:left;
 text-align:left;
 color:white;
}
#header #sitename
{
 margin-top:25px;
}
#header #sitename a
{
 color:white;
 text-decoration:none;
 font-size:30px;
 font-weight:900;
}
#header form
{
 margin-top:15px;
 float:right;
}
#header form li
{
 font-size:13px;
 margin-left:15px;
}
#header form li a
{
 color:#A9BCF5;
 text-decoration:none;
}
#header form input[type="text"]
{
 margin-top:3px;
 margin-bottom:3px;
 width:150px;
 border:1px solid #08298A;
 height:25px;
 padding-left:3px;
}
#header form input[type="password"]
{
 margin-top:3px;
 margin-bottom:3px;
 width:150px;
 border:1px solid #08298A;
 height:25px;
 padding-left:3px;
}
#header form input[type="submit"]
{
 height:25px;
 margin-top:20px;
 background-color:#084B8A;
 color:white;
 border:1px solid #08298A;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:980px;
}
#wrapper div
{
 float:left;
 font-family: helvetica, arial, sans-serif;
}
#wrapper #div1
{
 margin-top:30px;
 width:590px;
 text-align:left;
}
#wrapper #div1 p
{
 font-size:20px;
 font-family:arial;
 font-weight:bold;
 margin:0px;
 color:#0e385f;
}
#wrapper #div2
{
 margin-top:10px;
 width:390px;
 text-align:left;
}
#wrapper #div2 h1
{
 margin:0px;
 font-size:37px;
 color:#2E2E2E;
}
#wrapper #div2 p
{
 font-size:18px;
 color:#2E2E2E;
}
#wrapper #div2 li
{
 list-style-type:none;
 margin-top:10px;
}
#wrapper #div2 li #firstname
{
 width:49%;
}
#wrapper #div2 li #surname
{
 margin-left:2%;
 width:49%;
}
#wrapper #div2 li input[type="text"]
{
 width:100%;
 height:40px;
 border-radius:5px;
 padding-left:10px;
 font-size:18px;
 border:1px solid #BDBDBD;
}
#wrapper #div2 li input[type="password"]
{
 width:100%;
 height:40px;
 border-radius:5px;
 padding-left:10px;
 font-size:18px;
 border:1px solid #BDBDBD;
}
#wrapper #div2 li select
{
 padding:4px;
 float:left;
}
#wrapper #div2 li a
{
 margin-left:10px;
 width:150px;
 color:#045FB4;
 text-decoration:none;
 font-size:11px;
 display: inline-block;
 vertical-align: middle;
 line-height:15px;
}
#wrapper #div2 li a:hover
{
 text-decoration:underline;
}
#wrapper #div2 li
{
 color:#2E2E2E;
 font-size:18px;
}
#wrapper #div2 #terms
{
 color:#424242;
 font-size:11px;
}
#wrapper #div2 #terms a
{
 display:inline;
 margin:0px;
}
#wrapper #div2 li input[type="submit"]
{
 width:205px;
 height:45px;
 text-align:center;
 font-size:19px;
 margin-top: 10px;
 margin-bottom: 10px;
 font-family: 'Freight Sans Bold', helvetica, arial, sans-serif !important;
 font-weight: bold !important;
 background: linear-gradient(#67ae55, #578843);
 background-color: #69a74e;
 box-shadow: inset 0 1px 1px #a4e388;
 border-color: #3b6e22 #3b6e22 #2c5115;
 border: 1px solid;
 border-radius: 5px;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 position: relative;
 text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
#wrapper #div2 #create_page
{
 color:#424242;
 font-size:13px;
 font-weight:bold;
}
#wrapper #div2 #create_page a
{
 display:inline;
 margin:0px;
 font-size:13px;
}
#footer_wrapper
{
 width:100%;
 clear:both;
 float:left;
 margin-top:30px;
 min-width:995px;
 background-color:white;
 text-align:left;
}
#footer1
{
 width:980px;
 margin:0px auto;
 padding:0px;
 border-bottom:1px solid #E6E6E6;
 height:30px;
 line-height:30px;
 font-size:12px;
 color:#848484;
}
#footer1 a
{
 color:#365899;
 display:inline;
 margin-left:10px;
 text-decoration:none;
}
#footer1 a:hover
{
 text-decoration:underline;
}
#footer2
{
 width:980px;
 margin:0px auto;
 padding:0px;
 font-size:12px;
 color:#848484;
}
#footer2 a
{
 color:#365899;
 display:inline-block;
 margin:5px;
 margin-left:0px;
 min-width:80px;
 text-decoration:none;
}
#footer2 a:hover
{
 text-decoration:underline;
}

Estos son los archivos necesarios para crear una web con diseño similar al home o pagina de inicio de facebook.

Fuente: talkerscode

Ver demo