Incorporare un video YouTube su pagina html con autoplay

[piero54]

Ciao a tutti,
Mi piacerebbe incorporare un video YouTube su una pagina html e la cosa fin qui è semplice! Basta copiare ed incollare il codice che viene fornito per incorporare . Ma non riesco a dare il play in automatico quando viene caricata la pagina... cercando in rete ho visto che basta aggiungere "&autoplay=1" dopo l'ID del video ma non funziona! Dove sbaglio??

[Vincent.Zeno]

possiamo vedere il codice dell'iframe in questione?

[piero54]

questo è il codice copiato da youtube dove inserendo "&autoplay=1" subito prima o subito dopo "controls=0" non ottengo il play automatico al caricamento della pagina...

<iframe width="560" height="315" src="https://www.youtube.com/embed/KaJC7ObzG8w?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

grazie

[U235]

questo è il codice copiato da youtube dove inserendo "&autoplay=1" subito prima o subito dopo "controls=0" non ottengo il play automatico al caricamento della pagina...

<iframe width="560" height="315" src="https://www.youtube.com/embed/KaJC7ObzG8w?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

grazie

Ciao,
puoi far partire il player in automatico al (solo) caricamento della pagina solo con il mute attivo, questo, come detto svariate volte in altri post, è il giusto funzionamento per evitare di arrecare fastidio all'utente facendo partire l'audio al solo caricamento della pagina. Infatti l'utente potrebbe avere sbadatamente il volume audio al massimo, quindi caricando la pagina partirebbe un suono molto forte senza che l'utente abbia intenzionalmente fatto partire l'audio. Sembra una sciocchezza, ma immaginati se dovesse accadere a notte fonda o in una biblioteca...
Per cui dovresti aggiungere il parametro "mute=1" al url del iframe. Inoltre anche l'autoplay va messo nel url in questo modo:

https://www.youtube.com/embed/KaJC7ObzG8w?controls=0&autoplay=1&mute=1

Prova tu stesso

[U235]

PS
Tieni presente che cambia da browser a browser, ma in linea di massima nessuno permette il play automatico senza almeno il mute.

[piero54]

ok ora tutto funziona! ho capito finalmente!
io non devo usarlo su pagine di siti pubblici ma per una pagina che visualizzerò solo io, quindi il fatto che ci sia l'audio sarebbe cosa buona! esiste un modo per avere il play automatico con audio attivo??

grazie mille!!

[piero54]

piccola curiosità... sarebbe possibile in un video incorporato come questo eliminare la possibilità di fare pausa o play quando si clicca sul video stesso? e magari fare in modo che il play o la pausa si possano dare tramite dei pulsanti presenti nella pagina??

grazie

[U235]

piccola curiosit�... sarebbe possibile in un video incorporato come questo eliminare la possibilit� di fare pausa o play quando si clicca sul video stesso? e magari fare in modo che il play o la pausa si possano dare tramite dei pulsanti presenti nella pagina??

grazie

puoi fare quasi tutto quello che ti pare, qui trovi della documentazione.
Per eliminare la possibilità di mettere in pausa (quando l'utente clicca sul video mette e toglie la pausa) dovresti innanzi tutto non mostrare i controlli (questo lo fai con le playerVars) poi devi intercettare l'evento di cambio stato (lo definisci tra gli eventi quando inizializzi il palyer)e riavviare la riproduzione.

player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'M7lc1UVf-VE',
         playerVars: {
           'autoplay': 1,
            'mute':1
           'controls': 0 },
          events: {
            'onStateChange': onPlayerStateChange
          }
        });


...

function onPlayerStateChange()
{
    var state = player.getPlayerState();
    if(state===2){//se lo stato � 2 sta in pausa, quindi riavvii il palyer 
          player.playVideo();
        }
}

Per usare i controlli (play pause volume ecc.) su i tuoi "bottoni" (o link o quello che ti pare) devi gestire gli eventi click e chiamare le funzioni del player
Ad esempio per fermare il video :

<button onclick="stop()">
   Stop  
  </button>
.....


function stop()
{
    player.stopVideo();
}

Qui trovi un esempio funzionante che riavvia (subito) il video se l'utente clicca sopra (quindi va in pausa) e contiene un bottone che stoppa il video

[U235]

.

[piero54]

grazie mille per queste utilissime info!!

pensavo di aver risolto il problema del play in automatico, invece no! mi spiego meglio per mettervi nelle condizioni di capire cosa vorrei fare:

il video che vorrei incorporare vorrei visualizzarlo su una app fatta con AI2 .
In questa app utilizzo il Web Viewer (che dovrebbe essere il browser) nel quale visualizzo una pagina html (pippo.html) che contiene il seguente codice

<!doctype html><head>  
  <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">    
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <title>Test</title>
</head>
<body>   
  <script>
    document.write("" + window.AppInventor.getWebViewString());
    window.AppInventor.setWebViewString("non hai caricato nulla")
  </script> 
</body>
</html>

a pippo.html tramite la app passo l'<iframe> preso su youtube:

<iframe width="300" height="157" src="https://www.youtube.com/embed/KaJC7ObzG8w?controls=0&autoplay=1&mute=1" frameborder="0"  allowfullscreen></iframe>

con autoplay e mute posti a 1 , e nell'app visualizzo il video ma non va in play cosa che invece avviene perfettamente quando lo stesso codice lo copio in un file.html e lo apro con google chrome.

secondo voi perchè? il Web Viewer di AI2 non gestisce tale comando? il problema è nel file (pippo.html) a cui invio l' <iframe> di youtube?? o cosa?
grazie infinite