Cómo embeber un vídeo de YouTube con el sonido muteado

Es fácil de insertar vídeos de YouTube en tu sitio web. Sólo tienes que copiar el código embed, ya sabes, el iframe, y pegarlo en cualquier parte de tu página web. YouTube no ofrece opciones básicas de personalización, como poder modificar las dimensiones del reproductor u ocultar la imagen de marca de YouTube, pero si te gustaría tener más control sobre el diseño o el comportamiento del reproductor embebido, la API de YouTube Player es el camino a seguir.

En este tutorial os explicaré cómo poder embeber un vídeo de YouTube que se reproduzca automáticamente cuando la página se cargue, pero con el audio silenciado.

Por ejemplo, pongámonos en el caso de una tienda online en la que, para mostrar el atractivo de sus productos, ofrece vídeos que se reproducen automáticamente en cada uno de los productos. Solo tenéis que imaginar la algarabía que se debe producir cuando el sonido de los vídeos se activen a la vez. Seguro que al posible comprador no le quedan ganas de volver a la página. Lo suyo es que el volumen de dichos vídeos sea 0 y que el usuario pueda activar el sonido manualmente. Del mismo modo, si utilizas como fondo de página un vídeo de YouTuve, tiene más sentido incrustar el vídeo silenciados para que se ejecute en bucle.

Insertar el reproductor de YouTube con el sonido silenciado

Esto es facil. Ve a la página del vídeo de YouTube en cuestión y anota el ID del vídeo extrayéndolo de la URL. Por ejemplo, si el enlace de vídeo de YouTube es http://youtube.com/watch?v=xyz-123, el identificador del vídeo es xyz-123. Una vez que tengas el ID, todo lo que tienes que hacer es sustituir la palabra YOUR_VIDEO_ID en el código siguiente, con el ID del vídeo que quieras embeber.

<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // El ID del video de Youtube
width: 560, // Ancho del reproductor (en px)
height: 316, // Alto del reproductor (en px)
playerVars: {
autoplay: 1, // Auto-play cuando la página cargue
controls: 1, // Mostrar los botones de pause/play en el reproductor
showinfo: 0, // Esconder el titulo del vídeo
modestbranding: 1, // Esconder el logo de YouTube
loop: 1, // Reproducir el vídeo en bucle
fs: 0, // Esconder el botón de mostrar en pantalla completa
cc_load_policy: 0, // Escoder los subtitulos que se muestran por defecto
iv_load_policy: 3, // Escoder las anotaciones que se muestran por defecto
autohide: 0 // Esconder los controles del vídeo cuando se esté reproduciendo
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>

Después, pega el código editado en tu página web y el vídeo embebido se reproducirá automáticamente, pero con el sonido silenciado.

Además, puede personalizar el reproductor mediante la modificación de las diversas variables del reproductos tal y como aparece en los comentarios del código. Por ejemplo, si estableces la variable loop a 1, el vídeo se reproducirá en bucle. Establece fs a 1 para mostrar el botón de pantalla completa en el interior del reproductor de YouTube. Internamente, el reproductor se ha embebido utilizando la YouTube IFRAME API. Cuando la página se carga, el evento onReady ejecuta la acción de mutear el vídeo.

<div id="muteYouTubeVideoPlayer"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // El ID del video de Youtube
width: 560, // Ancho del reproductor (en px)
height: 316, // Alto del reproductor (en px)
playerVars: {
autoplay: 1, // Auto-play cuando la página cargue
controls: 1, // Mostrar los botones de pause/play en el reproductor
showinfo: 0, // Esconder el titulo del vídeo
modestbranding: 1, // Esconder el logo de YouTube
loop: 1, // Reproducir el vídeo en bucle
fs: 0, // Esconder el botón de mostrar en pantalla completa
cc_load_policy: 0, // Escoder los subtitulos que se muestran por defecto
iv_load_policy: 3, // Escoder las anotaciones que se muestran por defecto
autohide: 0 // Esconder los controles del vídeo cuando se esté reproduciendo
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>

Como ves, el vídeo se mostrará, pero con el sonido silenciado. No ha sido tan difícil después de todo. Ahora te toca a ti jugar con las distintas variables del reproductor de YouTube para embeber vídeos a tu gusto.

Fuente: labnol.org

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.