Coder Perfect

How can I use an iframe to embed an autoplaying YouTube video?


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="" 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="" 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="" 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="//{{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