Como Crear un Fondo de Video de YouTube

Los fondos de video grandes son una actual tendencia de moda en el diseño web. Los videos del tamaño del navegador han traído una nueva era al diseño web de una manera creativa. Implementado correctamente, añade un efecto dramático al sitio, haciéndolo más atractivo y entretenido para los visitantes.

Aparte del mensaje, una cosa interesante acerca de los fondos con video es que se reproducen de una manera muy suave comparado con los fondos animados por JavaScript que a veces requieren que la página tenga que cargar un montón de código e imágenes antes de que puedas ver la animación.

Muchas empresas como Powerhouse y Adidas usan fondos con video para entregar un mensaje o una historia sobre sus productos de una manera interesante.

A pesar de que la manera más común de crear uno es usando la etiqueta video de HTML5 junto con algo de CSS, merece la pena considerar la opción de utilizar videos alojados en la web como YouTube como fuente para el video de fondo. En este caso, no necesitas preocuparte por la respuesta del servido ya que el video se cargará directamente de YouTube.

En este articulo, te enseñaré como puedes crear un sitio con un video de fondo utilizando YouTube. Utilizaremos jQuery.mb.YTPlayer.js para personalizar y controlar el aspecto del diseño del video-fondo de YouTube. Vamos allá.

Recursos que necesitarás para completar este tutorial:

Configuración

A la hora de crear un sitio web con un video de fondo, debemos identificar lo que el usuario debe ver así como la configuración que debe tener. La siguiente lista de configuraciones muestra los pasos que debes tener en cuenta antes de empezar a crear el sitio:

  • El video deber durar de 15 a 30 segundos.
  • Debe reproducirse automáticamente.
  • El sonido debe estar silenciado. (Si deseas poner sonidos, asegúrate de que no es molesto)
  • Revisa que los textos o cabeceras sobre el video son legibles.
  • El mensaje o la historia del video debe ser claro y conciso.

HTML

Nuestro código tendrá tres secciones con las siguientes clases en particular:

  • Big-background
  • About-section
  • Small-background-section

La sección con la clase de big-background será nuestra sección principal con video-fondo mientras que las de about-section y small-background-section serán cubiertas con contenido. Pondremos estas dos últimas dentro de un div con la clase de wrapper.

<section class="big-background"> //Aquí el contenido del fondo grande </section>
<div class="wrapper">
<section class="about-section"> //Aquí el contenido Acerca de... </section>
<section class="small-background-section"> //Aquí el contenido del fondo pequeño </section>
</div>

Ahora pondremos el contenido de cada sección. En la secciones con fondo de video grande y pequeño, coloca un div con la clase pattern para crear una suave textura superpuesta al video. El resto del contenido de cada sección contendrá h1, h2, p y un botón de enlace con la etiqueta a.

<section class="big-background">
 <div class="pattern"></div>
 <div class="big-background-container">
 <h1 class="big-background-title">YOUTUBE</h1>
 <div class="divider"></div>
 <h1 id="colorize">VIDEO BACKGROUND</h1>
 <a href="#" class="big-background-btn">Volver al articulo</a>
 </div>
</section>
<div class="wrapper">
 <section class="about-section">
 <div class="about-section-container">
 <h2 class="about-section-title">UTILIZA UN VIDEO DE YOUTUBE LLAMATIVO</h2>
 <p>¿Cómo puedes añadir un video de fondo en tu web? <br/>Fácil! Presentamos jQuery MB.YTPlayer, un plugin para jQuery que te permite mostrar videos de YouTube en tus páginas web. <br/>¡Es sorprendente como puede transformar un video de YouTube en un fondo HTML con facilidad! ¡Sin afectar los tiempos de carga!</p>
 <a href="https://github.com/pupunzi/jquery.mb.YTPlayer" target="_blank" class="about-section-btn">Miralo aquí</a>
 </div>
 </section>
 <section class="small-background-section">
 <div class="pattern"></div>
 <div class="small-background-container">
 <h2 class="small-background-title"><span>Encuentranos en las redes sociales</span></h2>
 <ul class="socials">
 <li><a href="https://www.facebook.com/designmodo" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li>
 <li><a href="https://twitter.com/Designmodo" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li>
 <li><a href="https://plus.google.com/+Designmodo" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li>
 </ul>
 </div>
</section>

He utilizado los iconos sociales de Font Awesome en nuestra small-background-section. Ahora, añadiremos el código para el fondo de video de la sección grande utilizando jQuery.mb.YTPlayer. Simplemente usaremos una etiqueta de enlace y pondremos toda la configuración necesaria dentro. Coloca el siguiente código justo debajo de la etiqueta section con la clase de big-background.

<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=0WhoCe_2jpc’, containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>

Estos son los ajustes que hemos utilizado en la etiqueta de enlace:

  • clase player – esta clase será utilizada más tarde por mb.YTPlayer para habilita el video de fondo
  • videoURL – el enlace al video de YouTube
  • containment – el selector CSS del elemento del DOM donde quieres que se muestre el video de fondo
  • autoPlay – establece que el video se reproduzca automáticamente (Valor Booleano, true o false)
  • mute – determina si el video debe tener sonido o no (Valor Booleano)
  • startAt – punto del video donde debe empezar la reproducción
  • opacity – ajusta la transparencia del video

CSS

Empecemos a añadir estilos. Primero añade los estilos generales, esto incluye reglas básicas para las etiquetas hmtl, body, paragraph (p) y unordered list (ul, lista desordenada).

html {
 height:100%
}

body {
 font:15px/23px 'Raleway',sans-serif;
 margin:0;
 padding:0;
 height:100%;
 width:100%;
 -webkit-font-smoothing:antialiased;
 -webkit-text-size-adjust:100%
}

p {
 font-size:20px;
 line-height:140%;
 text-align:center
}

ul li {
 display:inline-block;
 list-style:none;
 padding-right: 10px;
}

Ahora, añade estilos para las clases wrapper, pattern y divider así como para la id colorize.

.wrapper {
 z-index:600;
 position:relative
}

.pattern {
 background-image:url(../images/pattern.png);
 background-repeat: repeat;
 background-attachment:scroll;
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0
}

.divider {
 background-image:url(../images/divider.png);
 display:block;
 width:300px;
 height:35px;
 margin:10px auto
}

#colorize {
 color:#f1c40f;
 font-family:'Lato',sans-serif;
 font-size:40px
}

Ahora los estos para la sección big-video-background. Establece el z-index en 550 y pon el atributo overflow en hidden. Esto asegurará que el contenido que sobresale de los videos de YouTube no será mostrado en tu sitio. El resto de los estilos cubrirán el titulo, los botones y la imagen de fondo por defecto (hablaremos de esto más tarde).

.big-background {
 z-index:550;
 text-align:center;
 height:100%;
 min-height:100%;
 position:relative;
 overflow:hidden
}

.big-background .big-background-container {
 width:830px;
 max-width:100%;
 display:inline-block;
 position:absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate(-50%,-50%);
 -moz-transform:translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 -o-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%)
}

.big-background-title {
 font-family:'Raleway',sans-serif;
 font-size:78px;
 color:#fff;
 font-weight:300;
 text-transform:uppercase;
 text-align:center;
 margin-bottom:22px;
 padding-top:20px;
 display:inline-block;
 background-attachment:scroll;
 background-repeat:repeat-x;
 background-position:top center
}

a.big-background-btn {
 font-family:'Lato',sans-serif;
 font-size:13px;
 text-transform:uppercase;
 text-decoration:none;
 color:#fff;
 background:transparent;
 border:2px solid #fff;
 padding:10px 14px;
 cursor:pointer;
 letter-spacing:2px;
 text-align:center;
 display:inline-block;
 -webkit-transition:.4s background ease;
 -moz-transition:.4s background ease;
 -o-transition:.4s background ease;
 transition:.4s background ease;
}

.big-background-btn:hover {
 color:#fff;
 background:rgba(255,255,255,0.20)
}

.big-background-default-image {
 background:url(../images/sunset.jpg);
 background-repeat:no-repeat;
 background-position:center center;
 background-size:cover;
 width:100%;
 height:100%;
 z-index:0;
 backface-visibility:hidden
}

Ahora vamos a por la sección about-section. Fijamos background-color (color de fondo) en white (blanco) y dale un padding de 60px arriba y abajo y luego 20px a la izquierda y a la derecha. El resto de los estilos son clases suplementarias en nuestro diseño.

.about-section {
 font-family:'Lato',sans-serif;
 color:#7f8c8d;
 background:#fff;
 padding:60px 20px
}

.about-section-container {
 text-align:center;
 padding-bottom:50px
}

.about-section-title {
 font-family:'Raleway',sans-serif;
 font-size:40px;
 background:#fff;
 color:#3d566e;
 padding:0 35px;
 margin-bottom:22px;
 background-attachment:scroll;
 background-repeat:repeat-x;
 background-position:center center;
 text-transform:uppercase
}

a.about-section-btn {
 font-family:'Lato',sans-serif;
 font-size:13px;
 text-transform:uppercase;
 text-decoration:none;
 color:#34495e;
 background:transparent;
 border:2px solid #34495e;
 padding:10px 14px;
 cursor:pointer;
 letter-spacing:2px;
 text-align:center;
 display:inline-block;
 -webkit-transition:.4s background ease;
 -moz-transition:.4s background ease;
 -o-transition:.4s background ease;
 transition:.4s background ease;
}

.about-section-btn:hover {
 color:#fff;
 background: #34495e;
}

Para nuestro fondo de video pequeño, el cual hará las veces de footer, estableceremos el width (ancho) al 100% y ocultaremos el contenido sobresaliente utilizando el atributo overflow. Añadiremos padding arriba y abajo para que haya espacio para que se vea el video de abajo. Añadiremos también algunos estilos a los enlaces de nuestra clase social al igual que para su estado hover.

.small-background-section {
 font-family:'Raleway',sans-serif;
 padding:100px 0;
 position:relative;
 width:100%;
 overflow:hidden
}

.small-background-container {
 position:relative;
 text-align:center
}

.small-background-title {
 font-size:40px;
 color:#f1c40f;
 font-weight:300;
 z-index:10;
 display:inline-block;
 text-transform:uppercase;
 margin-bottom:20px;
 margin-top: 20px;
 position:relative;
 background-attachment:scroll;
 background-repeat:repeat-x;
 background-position:top center
}

.socials a {
 color:#fff
}

.socials a:hover {
 color:#bdc3c7
}

Media queries

Para hacer nuestro sitio responsivo, añadamos algunas media queries a nuestra hoja de estilos.

@media screen and (max-width: 768px) {
.about-section-title {
 line-height:1
}
}

@media screen and (max-width: 480px) {
.big-background-title {
 font-size:58px
}

.small-background-title {
 line-height:1
}

/*.player{ display: none;} -> If you want to remove the video bg on a specific viewport w/o plugin*/
}

@media screen and (max-width: 360px) {
.big-background-title,#colorize {
 line-height:1
}
}

@media screen and (max-width: 320px) {
.small-background-title {
 font-size:30px
}
}

jQuery

Es hora de habilitar el video de fondo de YouTube. Llama a la clase player dentro del código jQuery. Pon el siguiente código abajo justo antes de cerrar la etiqueta body dentro entre las etiquetas <script> </script>.

$(function(){
 $(&quot;.player&quot;).mb_YTPlayer();
});

Fallback

El video de fondo no funcionará en móviles y tabletas debido a la política de restricciones que sigue la gestión de medios vía JavaScript. Por defecto vuelve al reproductor original cuando se utilizan dichos dispositivos.

Sin embargo, podemos usar un remedio jQuery para añadir una imagen de fondo por defecto cuando detectamos que el navegado usado para ver el sitio corresponde a un dispositivo móvil.

Solución manual

Para detectar si el usuario está navegando en un móvil o una tableta, podemos establecer el elemento en hidden a un tipo de resolución en particular y entonces manipularlo usando código en jQuery. Para hacer esto, digamos que queremos quitar el fondo de video en una resolución de 480px. Simplemente, añade display: none al elemento player para esa resolución. Mira el siguiente código:

&lt;/pre&gt;
&lt;pre class=&quot;p2&quot;&gt;@media screen and (max-width: 480px) {
  .player{ display: none; }
}&lt;/pre&gt;
&lt;pre class=&quot;p2&quot;&gt;

Ahora para manipular esto en nuestro código jQuery, estableceremos el valor de la variable is_mobile en false. Ahora, comprobaremos si la clase player está oculta por display: none. Si esto es así, añadiremos la clase big-background-default-image a la clase big-background y small-background-section para utilizar la imagen de fondo por defecto. De lo contrario, si esto fuera falso el video de fondo de YouTube se quedaría tal cual está.

&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;(function($) {&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt; $(document).ready(function() {&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;   var is_mobile = false;&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;   if( $('.player').css('display')=='none') {&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;     is_mobile = true;&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;   }&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;   if (is_mobile == true) {&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;     //Conditional script here&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;     $('.big-background, .small-background-section').addClass('big-background-default-image');&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;   }else{&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;     $(&quot;.player&quot;).mb_YTPlayer();&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;   }&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt; });&lt;/pre&gt;
&lt;pre class=&quot;p1&quot;&gt;})(jQuery);

Solución con plugin de jQuery

Otra forma de establecer la imagen de fondo en móviles y tabletas es utilizando un plugin de jQuery llamado device.js. Esto facilitará la escritura de reglas condicionantes para cada tipo de dispositivo añadiendo una clase a la etiqueta html. Utilizando este plugin, podemos simplemente utilizar el siguiente código.

(function($) {
 $(document).ready(function() {
 //Device.js will check if it is Tablet or Mobile - http://matthewhudson.me/projects/device.js/
 if (!device.tablet() &amp;&amp; !device.mobile()) {
 $(&quot;.player&quot;).mb_YTPlayer();
 } else {
 //jQuery will add the default background to the preferred class
 $('.big-background, .small-background-section').addClass('big-background-default-image');
 }
 });
})(jQuery);

En este código, he utilizado los métodos device.mobile() y device.tablet() para comprobar si el dispositivo del usuario es un móvil o una tableta. Si la condición devuelve true entonces la clase big-background-default-image se añadirá a big-background y small-background-section. De lo contrario, la clase player se quedará activa y el video de YouTube seguirá de fondo.

Conclusión

El video es una buena manera de entregar un mensaje a tu audiencia. Puede ser un potente elemento que añadir a tu página, si lo implementas correctamente.

Como el diseño crece y mejora constantemente, creo que irán innovando en la forma que usamos el video como parte de la web. Espero que hayas aprendido algo nuevo con este tutorial. No dudes en dejar tu opinión en los comentarios.

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres