Problem
I’m attempting to autoplay the new iframe version of a YouTube video that I’ve embedded.
As far as I can see, there is no way to do this via changing the URL’s flags. Is it possible to do it with JavaScript and the API?
Asked by 472084
Solution #1
(Warning: RickRoll video): This works in Chrome but not in Firefox 3.6:
<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>
Although the JavaScript API for iframe embeds is available, it is currently listed as a beta capability.
UPDATE: The iframe API is now fully supported, and “Creating YT.Player objects – Example 2” demonstrates how to use JavaScript to specify “autoplay.”
Answered by mjhm
Solution #2
The Autoplay Policy has been updated by Google since April 2018. You must include autoplay=1 as a query parameter as well as allow=’autoplay’ as an iframe property.
As a result, you’ll need to perform something like this:
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>
Answered by MatayoshiMariano
Solution #3
YouTube’s integrated code has autoplay turned off by default. Simply put, at the end of the “src” attribute, add autoplay=1. Consider the following scenario:
<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>
Answered by Waheed ur Rehman
Solution #4
August of this year On the iframe implementation, I couldn’t find a working example. The fact that the rest of the questions were all about Chrome gave it away a little.
In order for Chrome to autoplay, you’ll need to set the sound to mute=1. Using autoplay=1 as a parameter, FF and IE appear to operate correctly.
<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Answered by Tim Vermaelen
Solution #5
Add &enablejsapi=1 to the end of the iframe src to allow the js API to be used on the video.
Then there’s jquery:
jQuery(document).ready(function( $ ) {
$('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});
This should immediately play the video on the document. ready
You could also use this inside a click function to start the video by clicking on another element.
More crucially, videos cannot be auto-started on a mobile device, therefore users must always start the movie by clicking on the video player itself.
Edit: I’m not really convinced about this document. Because YouTube may still be loading the video, the iframe will be ready. This function is actually used within a click function:
$('.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
});
Answered by bdanin
Post is based on https://stackoverflow.com/questions/7281765/how-to-embed-an-autoplaying-youtube-video-in-an-iframe