Función de reproducción automática en youtube embed videos (iframe)

Recibí una solicitud de un cliente hace unos días, quería tener el video de youtube tiene en la Página principal de su sitio web para comenzar a jugar automáticamente.
Por supuesto, primera lo que uno piensa es que sólo tienes que añadir el autoplay = 1 al final de la url del embed, pero… bien sabes que no funciona.

Así que después de algunos googling y pruebas encontré aquí (https://developers.google.com/youtube/iframe_api_reference#Getting_Started) la solución.

En caso de que estoy pegando aquí el mismo código se encontrará:

<!DOCTYPE html>
<html></html>
  <body></body>
    <!-- 1. El <iframe>(y reproductor de vídeo) reemplazará a esto<div>etiqueta.</div></iframe> -->
    <div id="player"></div>

    <script></script>
      // 2. Este código carga el código IFrame Player API asincrónica.
      etiqueta var = document.createElement('script');

      Tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore (etiqueta, firstScriptTag);

      // 3. Esta función crea una <iframe>(y reproductor de YouTube)</iframe>
      después descargas el código API.
      jugador de var;
      función onYouTubeIframeAPIReady() {}
        jugador = nuevo YT. Jugador ('player', {}
          altura: '360',
          anchura: '640',
          videoId: 'M7lc1UVf-VE',
          eventos: {}
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. La API llamará a esta función cuando el reproductor de vídeo está listo.
      función onPlayerReady(event) {}
        event.target.playVideo();
      }

      // 5. La API llama a esta función cuando cambia el estado del jugador.
      La función indica que cuando se reproduce un vídeo (estado = 1),
      el jugador debe jugar durante seis segundos y luego se detiene.
      var = false;
      función onPlayerStateChange(event) {}
        Si (event.data == YT. PlayerState.PLAYING &&! hecho) {}
          setTimeout (stopVideo, 6000);
          = true;
        }
      }
      función stopVideo() {}
        player.stopVideo();
      }
    </script>
  </body>
</html>

Puede que desee quitar funciones 4, 5 y el detector de eventos:

'onStateChange': onPlayerStateChange

Si no desea detener el video para jugar después de 6 segundos.

Deja un comentario Cancelar respuesta