I received a request from a customer few days ago, he wanted to have the youtube video he have on his website’s homepage to start playing automatically.
Of course, fisrt thing one thinks is that you just have to add the autoplay=1 at the end of the embed url, but… well you know that, it doesn’t work.
So after some googling and tests I found here (https://developers.google.com/youtube/iframe_api_reference#Getting_Started) the solution.
Just in case I am pasting here the same code you will find there:
<!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360', width: '640', videoId: 'M7lc1UVf-VE', events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function stopVideo() { player.stopVideo(); } </script> </body> </html>
You may want to remove functions 4, 5 and the event listener:
'onStateChange': onPlayerStateChange
if you don’t want to stop the video to play after 6 seconds.