ver más

Tecnología

Cómo embeber un video de Youtube sin sonido

A veces es útil para no molestar a los lectores de tu sitio. En la nota, te explico los detalles y te muestro el código.

Rodolfo Pardo


Es fácil insertar vídeos de YouTube en tu sitio web. Sólo tienes que copiar el código embed IFRAME y pegarlo en cualquier parte de tu página web. No vengo a explicarte esto. 

YouTube NO ofrece opciones básicas de personalización pero te cuento que con unos retoques podemos modificar tamaños, dejarlo sin sonido, eliminar marcas y más. Es bueno que a través de la programación, vos controles a Youtube y no que la red social te controle a vos. Al fin y al cabo, es tu web. 

En este tutorial te voy a enseñar a embeber o incrustar un video de Youtube que se reproduzca automáticamente en tu website pero sin sonido; de esta manera vas a mostrar el contenido pero sin molestar al lector de tu web. 

Es muy fácil y solo necesitás un par de segundos. Visitá el video de Youtube que quieras inscrustar e identifica su ID (código de identificación). Ej: Por ejemplo, si el enlace de vídeo de YouTube es https://youtube.com/watch?v=rodipardo, la identificación del vídeo es rodipardo.

Una vez que tengas el ID, copiá y pegalo en la porción de código que dice "pegá tu ID" y listo! 

Una vez que tengas el código armado, lo único que te queda es llevarlo a tu web ;) 

 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: 'pegá el ID', // pegá el ID width: 560,               // Ancho del video en pixeles height: 316,              // Alto del video en pixeles playerVars: {
      autoplay: 1,        // Para el autoplay del video tiene 1 controls: 1,        // Controles de pausa y play showinfo: 0,        // Desde aquí podés esconder la info modestbranding: 1,  // Desde aquí podés ocultar el logo de YT loop: 1,            // Dale loop al video fs: 0,              // Esconder el botón de pantalla completa cc_load_policy: 0, // Esconder botones de cierre iv_load_policy: 3,  // Esconder botón de comentarios autohide: 0  // Esconder controles del video },
    events: { onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }
 
 // Rodi Pardo  script>

Te muestro un ejemplo para que entiendas de que se trata con un tutorial que realicé en Youtube sobre cómo realizar capturas de pantalla en Chrome sin el uso de extensiones: 

No te olvides de seguirme en Twitter, estoy para lo que necesites. 



Archivado en

Te recomendamos