How to embed an autoplaying YouTube video in an iframe?

Question

I am trying to embed the new iframe version of a YouTube video and get it to auto play.

As far as I can tell, there is no way of doing this by amending flags to the URL. Is there a way to do it by using JavaScript & the API?

Solution 1

This works in Chrome but not Firefox 3.6 (warning: RickRoll video):

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

The JavaScript API for iframe embeds exists, but is still posted as an experimental feature.

UPDATE: The iframe API is now fully supported and "Creating YT.Player objects - Example 2" shows how to set "autoplay" in JavaScript.

Solution 2

Since April 2018, Google made some changes to the Autoplay Policy. You not only need to add the autoplay=1 as a query param, but also add allow='autoplay' as an iframe's attribute

So you will have to do something like this:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>

Solution 3

The embedded code of youtube has autoplay off by default. Simply add autoplay=1at the end of "src" attribute. For example:

<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>

Solution 4

August 2018 I didn't find a working example on the iframe implementation. Other questions were related to Chrome only, which gave it away a little.

You'll have to mute sound mute=1 in order to autoplay on Chrome. FF and IE seem to be working just fine using autoplay=1 as parameter.

<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Solution 5

2014 iframe embed on how to embed a youtube video with autoplay and no suggested videos at end of clip

rel=0&autoplay 

Example Below: .

<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

View more solutions

Comments

[daniel metlitski]

Is there a way to mute the sound when the video starts playing, through code, I don't want to surprise my users with sound

[mercury]

Browser has settings for that

[Linus Caldwell]

Hint: On mobile devices it's possible both the src parameter and the api call will not work due to restrictions: developers.google.com/youtube/…

[Someone Somewhere]

I find that on mobile (Webview on Android 5.0) the function onYouTubeIframeAPIReady() isn't triggered. Anyone have a solution ?

[tyler.frankenstein]

Utilizing this answer, and wrapping the jQuery selector in a setTimeout worked for me.

[Squirrl]

add ?autoplay=1 to the src

[Waheed ur Rehman]

yes actually autoplay=1 while ? indicate src may have parameters like color, controls and each separated by & sign. detail description can be seen here developers.google.com/youtube/player_parameters#Parameters

[jaggedsoft]

The reason yours didn't work is because you already had ?rel=0 in there. If you removed that it would have worked. Read more about query string syntax here if you'd like. ?rel=0?autoplay=1 should be either ?autoplay=1 or ?rel=0&autoplay=1

[Hastig Zusammenstellen]

@NextLocal Thanks, I'll come back to this and edit/delete my answer next time I'm working on something that iframes youtube videos.

[jaggedsoft]

the example you're providing http://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1 definitely won't work, but https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1 should

[Hastig Zusammenstellen]

@NextLocal Ha, I got it now. Not sure how I didn't realize that :D Thanks again.

[daniel metlitski]

Is there a way to mute the sound when the video starts playing, through code, I don't want to surprise my users with sound

[daniel metlitski]

Is there a way to mute the sound when the video starts playing, through code, I don't want to surprise my users with sound

[Matthias Kleine]

Same here, just fire the event several times every second and it will work.

[Hastig Zusammenstellen]

@danielmetlitski I'm sure you've figured how to mute by now but here's an answer future readers

[MattAllegro]

stackoverflow.com/questions/48086769/… @JoJo

[Jeffz]

You may also need: allow="autoplay" for your iFrame

[mate.gvo]

In my case it works from the console, or when I already interacted with the video manually. Doesn't work on load, even timed-out

[shaneonabike]

works a trick! I couldn't figure out why page loads were only showing the video sometimes and not other times !

[Gkiokan]

autoplay=1 as paramter is not enough (time of writing July 20). I'd to add allow='autoplay' to the iframe to get the autoplay feature working.

[MatayoshiMariano]

@Gkiokan Yep, u need that. I had that in the snippet :)

[Gkiokan]

Yea, I wanted to make it clear to the others that the solution is not only the param in the URL but also the extra parameter :) Maybe you should mention that explicit.

[Bhavin]

@danielmetlitski You can use muted attributes so you can mute your video

[robbclarke]

Most helpful answer by far. Makes sense.

[Ahmed El-Atab]

It is not about firing the event frequently! YouTube had recently updated their policy on auto playing embedded videos. The new policy is that a video CANNOT be auto played until there is a real user interaction on the page (clicking, scrolling...). I think that in your case since you're firing the code every second, the code just run normally after the first user interaction, so you'd think that the reason is the frequent firing of the event! Nevertheless, it is NOT a good practice to fire a code like this every second!

[BVernon]

Have all that but still not working :(

[Pyzard]

Thank you so much for the answer, but how could I unmute the video after autoplaying it?

[Tim Vermaelen]

The point is it's impossible programmatically for embedded videos. To unmute, a user increases the volume on his player. At that point his consent is given to even play audio.

[Toniq]

This is not even in the official docs: developers.google.com/youtube/player_parameters#autoplay

[Tim Vermaelen]

It's a browser related thing, not a youtube thing: developer.chrome.com/blog/autoplay