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

225

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?

472084
fuente
¿Hay alguna manera de silenciar el sonido cuando el video comienza a reproducirse, a través del código, no quiero sorprender a mis usuarios con el sonido?
Daniel Metlitski

Respuestas:

423

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.

mjhm
fuente
2
Sugerencia: en dispositivos móviles, es posible que tanto el parámetro src como la llamada a la API no funcionen debido a restricciones: developers.google.com/youtube/…
Linus Caldwell
Encuentro que en el móvil (Webview en Android 5.0) la función onYouTubeIframeAPIReady()no se activa. Alguien tiene una solución ?
Alguien en alguna parte
2
¿Hay alguna manera de silenciar el sonido cuando el video comienza a reproducirse, a través del código, no quiero sorprender a mis usuarios con el sonido?
Daniel Metlitski
66
También puede necesitar: allow = "autoplay" para su iFrame
Jeffz
40

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>
Waheed ur Rehman
fuente
2
añadir ?autoplay=1al src
Squirrl
1
sí en realidad reproducción automática = 1 mientras? indicar src puede tener parámetros como color, controles y cada uno separado por & signo. la descripción detallada se puede ver aquí developers.google.com/youtube/player_parameters#Parameters
Waheed ur Rehman
35

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>
MatayoshiMariano
fuente
14

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>
Tim Vermaelen
fuente
12

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&amp;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>
Ralph
fuente
9

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
});
bdanin
fuente
1
Utilizando esta respuesta, y envolviendo el selector jQuery en un setTimeouttrabajo para mí.
tyler.frankenstein
1
Lo mismo aquí, simplemente dispara el evento varias veces cada segundo y funcionará.
Matthias Kleine
6

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).

Salman A
fuente
6

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

Hastig Zusammenstellen
fuente
1
La razón por la que la tuya no funcionó es porque ya la tenías ?rel=0allí. Si eliminaste eso hubiera funcionado. Lea más sobre la sintaxis de cadena de consulta aquí si lo desea. ?rel=0?autoplay=1debería ser ?autoplay=1o?rel=0&autoplay=1
jaggedsoft
@NextLocal Gracias, volveré a esto y editaré / eliminaré mi respuesta la próxima vez que esté trabajando en algo que transmita videos de YouTube.
Hastig Zusammenstellen
el ejemplo que está brindando http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1definitivamente no funcionará, pero https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1debería
jaggedsoft
@NextLocal Ha, lo tengo ahora. No estoy seguro de cómo no me di cuenta de eso: D Gracias de nuevo.
Hastig Zusammenstellen
¿Hay una manera de silenciar el sonido cuando el vídeo comienza a reproducirse, a través del código, no quiero sorprender a mis usuarios con sonido
Daniel metlitski
3

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>
MattAllegro
fuente
2

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>
Jonas WebDev
fuente
funciona un truco! ¡No pude entender por qué las cargas de página solo mostraban el video a veces y no otras veces!
Shaneonabike
1

1 - agregar &enablejsapi=1aIFRAME SRC

2 - jQuery func:

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

Funciona bien

Gabriel Morais
fuente
En mi caso, funciona desde la consola, o cuando ya interactué con el video manualmente. No funciona con carga, incluso se agotó el tiempo de espera
mate.gwozdz
0

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

Desarrollador HTML5
fuente
0
<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>
George Sariev
fuente
0

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}
            />
        )
    }

}
Davide Carpini
fuente