Colocar vídeos de Youtube como fondo (Background) [Jquery] - Trucodigo

Colocar vídeos de Youtube como fondo (Background) [Jquery]




hola trucodigueros muchas veces queremos agregar algún recurso a un sitio web permite resaltar de alguna manera de los demás y por lo tanto lograr al final un diseño que sea original y atractivo; en esta entrada conoceremos un recurso que nos ayudará en esta tarea, el mismo permite colocar videos registrados en YouTube como fondo (Background) en una página web a través de un plugin para jQuery bueno empezemos.

Primero colocaremos esto dentro de la etiqueta <head>

<link rel="stylesheet" href="youtubebackground.css">

<script src="jquery.min.js"></script>
<script src="jquery.youtubebackground.js"></script>


Despues justo al inicio de <body> colocamos esto

<div id="background-video" class="background-video">
<img src="placeholder.jpg" alt="" class="placeholder-image">
</div>
<script>
$('#background-video').YTPlayer({
fitToBackground: true,
videoId: 'hh1SBpVl1GA'
});
</script>


despues tendran que descargar estos archivos y subirlos en donde tengan su archivo donde insertaron los codigos

Archivos

ahora para cambiar el video de fondo solo tendran que buscar esta linea

videoId: 'hh1SBpVl1GA'


y cambiar "hh1SBpVl1GA" por el id del video que ustedes quieran


OPCIONES DEL PLUGIN JQUERY.YOUTUBEBACKGROUND (solo si sabes javascript)

ratio: Indica la relación de aspecto (16/9 por defecto) del video.
videoId: Identificador del video.
mute: Booleano que indica si silencia el video (true) o no (false).
repeat: Booleano que indica si debe de repetirse el video a su finalización
fitToBackground: Ajusta al fondo el video seleccionado.


Bueno eso seria todo espero les haya gustado y como siempre me despido de ustedes dejandoles la


DEMO
Tags
Opciones
Estadísticas
Creado 20.11.2015 a las 23:10 hs
Categoría JavaScript
  • 0
    Medallas
  • 0
    Favoritos
  • 1084
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes