En este tutorial te voy a enseñar cómo insertar en tu página web un vídeo de youtube que se inicie automáticamente al cargar una página y que no tenga sonido. Para ello vamos a usar la API que nos proporciona Youtbe. Tendremos que escribir código en JavaScript, muy poco en realidad, vamos a empezar.
Paso 1
Lo primero que necesitamos para seguir es el identificador del vídeo que queremos cargar. Para ello entramos en Youtube y buscamos el vídeo deseado, el id de este vendrá a partir de v= dentro de la URL, en la siguiente imagen te muestro un ejemplo:
Ahora ya podemos agregar el script a nuestra página, a continuación te explico algunos detalles a tener en cuenta.
Paso 2
Necesitamos un espacio en nuestro HTML donde agregar el reproductor, para ello usamos un div, esa instrucción en el código es este (el id es necesario para la función que usamos de la API):
<div id="reproductorSinAudio"></div>El id le puedes poner el que quieras, si lo cambias fíjate que en el código del paso 4 también aparece al crear el reproductor, tendrás que cambiarlo también, ya que referencia a este div a través del id.
Paso 3
Enlazamos la API de Youtube a nuestra página, para ello escribimos la siguiente instrucción:
<script async src="https://www.youtube.com/iframe_api"></script>Date cuenta de que se trata de una carga asíncrona.
Paso 4
Agregamos unas etiquetas script (al final del body mismamente), en ellas crearemos la función onYouTubeIframeAPIReady(). El nombre de la función tienes que dejarlo así. Dentro de esta función configuraremos el ancho, el alto del reproductor, el ID del vídeo y algunas características más.
<script>
function onYouTubeIframeAPIReady() {
var reproductor;
reproductor = new YT.Player('reproductorSinAudio', {
videoId: '4CGxmrq3YB0',
width: 730,
height: 370,
playerVars: {
autoplay: 1,
controls: 1,
showinfo: 0,
modestbranding: 0,
loop: 1,
fs: 0,
cc_load_policty: 0,
iv_load_policy: 3,
autohide: 0
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>
[color=#a9a9a9]Código con API Youtube[/color]
Algunas apreciaciones
- El ID del vídeo se tiene que meter en videoId.
- Para el auto inicio se utiliza autoplay, 1 será que se inicia solo, si pones 0 no.
- Para silenciarlo se usa la siguiente función dentro de la zona eventos:
onReady: function(e) {
e.target.mute();
}También podrás configurar el número de veces que se repite el vídeo (loop), si se muestra los controles (controls), tales como play, volumen, etc.
A continuación te dejo el código completo:
<html>
<head></head>
<body>
<div id="reproductorSinAudio"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var reproductor;
reproductor = new YT.Player('reproductorSinAudio', {
videoId: '4CGxmrq3YB0',
width: 730,
height: 370,
playerVars: {
autoplay: 1,
controls: 1,
showinfo: 0,
modestbranding: 0,
loop: 1,
fs: 0,
cc_load_policty: 0,
iv_load_policy: 3,
autohide: 0
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>
</body>
</html>
Al abrir el archivo que tiene el código de arriba, nos saldrá el reproductor, tal y como se ven en la siguiente imagen:
Por si quieres el código te dejo aquí un zip:
videoYoutube.zip 533 bytes 355 Descargas