Anteriormente, compartimos contigo 5 de los mejores complementos de jQuery para agregar un video como fondo en tu sitio web . Esos complementos le permiten incrustar videos desde su propio servidor (o servidores externos) siempre que se sirvan en mp4, ogg, wav, etc. Sin embargo, ¿qué sucede si no desea alojar sus videos sino utilizar un servicio como YouTube? para ello ? Seguramente los complementos mencionados en la parte superior no son una opción para ti.
Afortunadamente, hay otro complemento que puede comenzar a usar para usar videos alojados en YouTube como fondo para su sitio web, estamos hablando del complemento jquery.mb.YTPlayer.
1. Descarga e incluye jquery.mb.YTPlayer
Lo primero que debe hacer para agregar un video de YouTube como fondo para su sitio web es descargar el complemento jquery.mb.YTPlayer. Este componente jQuery de código abierto le permite crear fácilmente su reproductor de Youtube personalizado o usar cualquier video de Youtube como fondo para su página. Necesitará básicamente 3 archivos:
jQuery(obviamente, ya que este es un complemento jQuery)YTPlayer.css(estilos básicos para el fondo del video)jquery.mb.YTPlayer.js(el archivo del complemento)
Puede obtener los 2 archivos del complemento de las versiones del proyecto en Github aquí (archivo zip) o descargar desde el navegador los archivos de la carpeta dist del repositorio . Después de descargar los archivos, simplemente inclúyalos como referencias utilizando el script y las etiquetas de enlace en su documento:
Importante
El complemento, como muchos otros, requiere que el documento HTML se entregue desde un servidor (protocolo http o https). Acceder al complemento desde el file:// protocolo, hará que el complemento sea inutilizable.
<!-- Incluir estilos del jugador de fondo. -->
<link href="YTPlayer.css" media="all" rel="stylesheet" type="text/css">
<!--Incluir jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Incluir el núcleo del complemento -->
<script src="jquery.mb.YTPlayer.js"></script>Después de incluir los archivos, podrá utilizar el complemento fácilmente. Para obtener más información sobre este complemento, visite el repositorio oficial en Github aquí o lea los documentos .
2. Usando el complemento
El complemento es realmente fácil de usar, por lo que el único problema para usted es básicamente saber qué video usar. El complemento debe inicializarse en un elemento DOM abstracto. Con abstracto queremos decir que el elemento no será visible para el usuario en teoría, ya que se reproduce como un "controlador invisible" para el video de fondo, por lo que la inicialización y otros métodos (como reproducir, pausar) se usarían en este elemento, sin embargo el video no se reproducirá en este elemento:
<!-- Controlador de video abstracto -->
<div id="controller"></div>
<!-- si lo quieres dentro de un elemento personalizado -->
<div id="video-container" style="width: 640px;height: 480px;"></div>
<script>
$("#controller").YTPlayer({
// URL del video de YouTube
videoURL:'http://youtu.be/BsekcY04xvQ',
// usa "body" para toda la pantalla
// o un selector para un elemento personalizado
containment: "#video-container"
// para más opciones de inicialización,
// por favor lea los documentos
});
</script>Para decidir dónde debe aparecer el video, durante la inicialización, el objeto de argumento espera una opción, a saber, contenedor, donde debe proporcionar un selector DOM (ID de elemento o clase), por lo que si desea que aparezca como pantalla completa, debe usar cuerpo como El contenedor. Hay muchas opciones de inicialización para el complemento, por lo que es posible que desee leer lo que le interesa en los documentos del área de inicialización .
Ejemplo de pantalla completa
El siguiente documento muestra cómo usar un video de YouTube como fondo de toda la página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Incluir estilos del reproductor -->
<link href="resources/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<title>YouTube Video as Page Background</title>
</head>
<body>
<!--
Define el elemento de control del video de youtube. Este elemento es abstracto y
es solo, como se mencionó, para controlar el video. Cuando desee realizar cambios en
el reproductor, lanza las funciones de YTPlayer en este elemento
-->
<div id="player-control"></div>
<!-- Incluir jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Incluir el núcleo del complemento -->
<script src="resources/jquery.mb.YTPlayer.min.js"></script>
<script>
// Cuando el documento esté listo
$(document).ready(function(){
// Inicializar el reproductor de YouTube
$("#player-control").YTPlayer({
// URL del video de YouTube
videoURL:'http://youtu.be/BsekcY04xvQ',
// Si lo quieres como fondo de tu sitio web
// o de un elemento, por ejemplo, #elementId
containment: "body",
autoplay: true,
mute: true,
startAt: 0,
opacity: 1,
// Ocultar controles de YouTube
showControls: false,
onReady: function(){
console.log("Jugador inicializado con éxito");
},
onError: function(err){
console.log("Ocurrió un error", err);
}
});
});
</script>
</body>
</html>Ejemplo de elemento DOM personalizado
El siguiente ejemplo muestra cómo configurar un video de YouTube como fondo de un elemento personalizado de su documento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Include Styles of the player -->
<link href="resources/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<style>
/* Definir unas dimensiones al contenedor donde aparecerá el video */
#dom-element {
width: 600px;
height: 400px;
position: relative;
top: 0;
left: 0;
z-index: 0;
background-size: cover;
}
</style>
<title>YouTube Video as Page Background</title>
</head>
<body>
<!--
Define el elemento de control del video de youtube. Este elemento es abstracto y
es solo, como se mencionó, para controlar el video. Cuando desee realizar cambios en
el reproductor, lanza las funciones de YTPlayer en este elemento
-->
<div id="player-control"></div>
<!-- El video aparecerá en este elemento. -->
<div id="dom-element"></div>
<!-- Incluir jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Incluir el núcleo del complemento -->
<script src="resources/jquery.mb.YTPlayer.min.js"></script>
<script>
// Cuando el documento esté listo
$(document).ready(function(){
// Inicializar el reproductor de YouTube
$("#player-control").YTPlayer({
// URL del video de YouTube
videoURL:'http://youtu.be/BsekcY04xvQ',
// Como lo queremos como fondo de un elemento personalizado, usaremos
// el ID del elemento personalizado
containment: "#dom-element",
autoplay: true,
mute: true,
startAt: 0,
opacity: 1,
// Ocultar controles de YouTube
showControls: false,
onReady: function(){
console.log("Jugador inicializado con éxito");
},
onError: function(err){
console.log("Ocurrió un error", err);
}
});
});
</script>
</body>
</html>Que te diviertas ❤️!
Conviertete en un programador más sociable