Cargando

Ir a contenido

X


Ver Más! Profesionales IT y desarrolladores: Llega el evento más importante del año! Servicios cloud, Business Applications, Analytics, IoT, Machine Learning, Bots, Blockchain etc.


 


Cómo insertar vídeo Youtube con auto arranque y sin sonido

Aprende a usar la API de Youtube para insertar un vídeo en una web que se auto arranque y no tenga sonido entre otras opciones


Escrito por jun 15 2016 12:26 youtube


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:

 

youtube_embebido.jpg

 

 

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>
Código con API Youtube

 

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:

 

Fichero Adjunto  videoYoutube.zip   533 bytes   125 Descargas

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



1 Comentarios

Gracias !!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jun 15 2016 12:26
  •   Actualizado jun 15 2016 12:42
  •   Visitas 3.8K
  •   Nivel
    Avanzado