¿Cómo incrustar un video de YouTube de reproducción automática en un iframe?

Estoy intentando insertar la nueva versión de iframe de un video de YouTube y hacer que se reproduzca automáticamente.

Por lo que puedo decir, no hay forma de hacerlo modificando las banderas a la URL. ¿Hay alguna manera de hacerlo usando JavaScript y la API?

Esto funciona en Chrome pero no en Firefox 3.6 (advertencia: video RickRoll):

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

La API de JavaScript para incrustaciones de iframe existe, pero aún se publica como una característica experimental.

ACTUALIZACIÓN: la API de iframe ahora es totalmente compatible y "Crear objetos YT.Player - Ejemplo 2" muestra cómo configurar "reproducción automática" en JavaScript.

El código incrustado de youtube tiene la reproducción automática desactivada por defecto. Simplemente agregue autoplay=1al final del atributo "src". Por ejemplo:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

Desde abril de 2018, Google realizó algunos cambios en la Política de reproducción automática . Entonces tendrás que hacer algo como esto:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

Agosto de 2018 No encontré un ejemplo de trabajo sobre la implementación del iframe. Otras preguntas se relacionaron solo con Chrome, lo que lo delató un poco.

Tendrás que silenciar el sonido mute=1para reproducir automáticamente en Chrome. FF e IE parecen estar funcionando bien autoplay=1como parámetro.

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

2014 iframe incrustado sobre cómo incrustar un video de youtube con reproducción automática y sin videos sugeridos al final del clip

rel=0&autoplay 

Ejemplo a continuación:.

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

al final del iframe src, agregue &enablejsapi=1para permitir que la API js se use en el video

y luego con jquery:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

esto debería reproducir el video automáticamente en document.ready

tenga en cuenta que también puede usar esto dentro de una función de clic para hacer clic en otro elemento para iniciar el video

Más importante aún, no puede iniciar automáticamente los videos en un dispositivo móvil, por lo que los usuarios siempre tendrán que hacer clic en el reproductor de video para iniciar el video.

Editar: en realidad no estoy 100% seguro en document.ready el iframe estará listo, porque YouTube aún podría estar cargando el video. De hecho, estoy usando esta función dentro de una función de clic:

$('.video-container').on('click', function(){
  $('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
  // add other code here to swap a custom image, etc
});

Las banderas , o parámetros que se pueden utilizar con incrusta IFRAME y el objeto están documentados aquí; los detalles sobre qué parámetro funciona con qué jugador también se mencionan claramente:

Jugadores integrados de YouTube y parámetros de jugador

Notarás que autoplayes compatible con todos los reproductores (AS3, AS2 y HTML5).

Sugerencia de consultas múltiples para aquellos que no saben (pasado y futuro)

Si está haciendo una sola consulta con la URL, simplemente ?autoplay=1funciona como se muestra en la respuesta de mjhm

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>

Si está haciendo múltiples consultas, recuerde que la primera comienza con un ?tiempo, el resto comienza con un&

Supongamos que desea desactivar los videos relacionados pero habilitar la reproducción automática ...

Esto funciona

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

y esto funciona

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

Pero estos no funcionarán ...

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

comparaciones de ejemplo

https://jsfiddle.net/Hastig/p4dpo5y4/

más información

Lea la respuesta de NextLocal a continuación para obtener más información sobre el uso de múltiples cadenas de consulta

Para tener la respuesta aceptada por mjhm trabajando en Chrome 66 en mayo de 2018, agregué allow=autoplayal iframe y enable_js=1a la cadena de consulta:

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

Hoy en día incluyo un nuevo atributo "permitir" en la etiqueta iframe, por ejemplo:

allow = "acelerómetro; reproducción automática; medios cifrados; giroscopio; imagen en imagen"

El código final es:

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

1 - agregar &enablejsapi=1aIFRAME SRC

2 - jQuery func:

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

Funciona bien

Para usar la API de JavaScript,

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

Para reproducir el youtube con la identificación:

swfobject.embedSWF

referencia: https://developers.google.com/youtube/js_api_reference magazine

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

Diciembre 2018

Buscando un video de YouTube AUTOPLAY, LOOP, MUTE para reaccionar.

Otras respuestas no funcionaron.

Encontré una solución con una biblioteca: react-youtube

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}