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?

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, May 24 '17 at 11:57

mjhm · Accepted Answer · 2012-10-24T15:15:28.610

451

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.

edited Oct 24 '12 at 15:15

answered Sep 02 '11 at 16:31

mjhm

16,161
9
42
55

2

Hint: On mobile devices it's possible both the src parameter and the api call will not work due to restrictions: https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations – Linus Caldwell Nov 08 '14 at 23:25
I find that on mobile (Webview on Android 5.0) the function `onYouTubeIframeAPIReady()` isn't triggered. Anyone have a solution ? – Someone Somewhere Jan 19 '15 at 19:08
2

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 May 24 '17 at 11:57
https://stackoverflow.com/questions/48086769/youtube-iframe-api-allow-autoplay-chrome-65 @JoJo – MattAllegro May 17 '18 at 09:41
8

You may also need: allow="autoplay" for your iFrame – Jeffz Jun 04 '18 at 20:49
@danielmetlitski You can use muted attributes so you can mute your video – Bhavin Jul 14 '20 at 07:06

MatayoshiMariano · Answer 2 · 2020-07-13T13:32:18.297

64

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>

edited Jul 13 '20 at 13:32

answered Jul 04 '18 at 18:32

MatayoshiMariano

1,886
18
23

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. – Gkiokan Jul 09 '20 at 11:55
@Gkiokan Yep, u need that. I had that in the snippet :) – MatayoshiMariano Jul 09 '20 at 16:29
1

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. – Gkiokan Jul 13 '20 at 07:20

score 41 · Answer 3 · edited Aug 13 '13 at 20:26

41

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>

edited Aug 13 '13 at 20:26

develCuy

520
5
13

answered Jan 23 '13 at 17:19

Waheed ur Rehman

765
6
13

3

add `?autoplay=1` to the src – Squirrl Jun 17 '16 at 23:20
1

yes actually autoplay=1 while ? indicate src may have parameters like color, controls and each separated by & sign. detail description can be seen here https://developers.google.com/youtube/player_parameters#Parameters – Waheed ur Rehman Jun 19 '16 at 00:12

score 39 · Answer 4 · answered Aug 14 '18 at 12:17

39

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>

answered Aug 14 '18 at 12:17

Tim Vermaelen

6,501
1
24
37

3

Most helpful answer by far. Makes sense. – robbclarke Jan 07 '21 at 13:23
Thank you so much for the answer, but how could I unmute the video after autoplaying it? – Pyzard Oct 04 '21 at 08:13
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. – Tim Vermaelen Oct 04 '21 at 12:24
This is not even in the official docs: https://developers.google.com/youtube/player_parameters#autoplay – Toniq Jan 09 '22 at 17:12
It's a browser related thing, not a youtube thing: https://developer.chrome.com/blog/autoplay/ – Tim Vermaelen Jan 09 '22 at 20:25

score 12 · Answer 5 · edited Jul 11 '18 at 11:10

12

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

rel=0&amp;autoplay

Example Below: .

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

edited Jul 11 '18 at 11:10

Victoria

7,617
2
20
43

answered May 05 '14 at 21:41

Ralph

129
1
2

bdanin · Answer 6 · 2015-07-15T15:11:44.057

12

at the end of the iframe src, add &enablejsapi=1 to allow the js API to be used on the video

and then with jquery:

jQuery(document).ready(function( $ ) {
  $('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});

this should play the video automatically on document.ready

note, that you could also use this inside a click function to click on another element to start the video

More importantly, you cannot auto-start videos on a mobile device so users will always have to click on the video-player itself to start the video

Edit: I'm actually not 100% sure on document.ready the iframe will be ready, because YouTube could still be loading the video. I'm actually using this function inside 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
});

edited Jul 15 '15 at 15:11

answered Jul 15 '15 at 14:27

bdanin

743
7
9

1

Utilizing this answer, and wrapping the jQuery selector in a `setTimeout` worked for me. – tyler.frankenstein Apr 18 '16 at 13:37
1

Same here, just fire the event several times every second and it will work. – Matthias Kleine Jun 18 '17 at 07:11
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! – Ahmed El-Atab Sep 23 '21 at 22:52

score 6 · Answer 7 · answered Nov 15 '12 at 22:33

The flags, or parameters that you can use with IFRAME and OBJECT embeds are documented here; the details about which parameter works with what player are also clearly mentioned:

YouTube Embedded Players and Player Parameters

You will notice that autoplay is supported by all players (AS3, AS2 and HTML5).

score 6 · Answer 8 · edited May 23 '17 at 10:31

6

Multiple queries tip for those who don't know (past me and future me)

If you're making a single query with the url just ?autoplay=1 works as shown by mjhm's answer

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

If you're making multiple queries remember the first one begins with a ? while the rest begin with a &

Say you want to turn off related videos but enable autoplay...

This works

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>

and this works

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>

But these won't work..

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>

<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>

example comparisons

https://jsfiddle.net/Hastig/p4dpo5y4/

more info

Read NextLocal's reply below for more info about using multiple query strings

edited May 23 '17 at 10:31

Community

1
1

answered Aug 30 '16 at 01:25

Hastig Zusammenstellen

4,082
3
31
45

1

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](http://wiki.marketruler.com/Query_string#Query_String) if you'd like. `?rel=0?autoplay=1` should be either `?autoplay=1` or `?rel=0&autoplay=1` – jaggedsoft Oct 02 '16 at 20:12
@NextLocal Thanks, I'll come back to this and edit/delete my answer next time I'm working on something that iframes youtube videos. – Hastig Zusammenstellen Oct 03 '16 at 01:20
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 – jaggedsoft Oct 03 '16 at 20:00
@NextLocal Ha, I got it now. Not sure how I didn't realize that :D Thanks again. – Hastig Zusammenstellen Oct 04 '16 at 04:27
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 May 24 '17 at 11:58
@danielmetlitski I'm sure you've figured how to mute by now but here's [an answer](https://stackoverflow.com/a/44725609/3377049) future readers – Hastig Zusammenstellen Apr 05 '18 at 06:29

score 4 · Answer 9 · answered Dec 06 '19 at 21:15

4

Nowadays I include a new attribute "allow" on iframe tag, for example:

allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"

The final code is:

<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1" 
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

answered Dec 06 '19 at 21:15

Jonas WebDev

353
3
12

1

works a trick! I couldn't figure out why page loads were only showing the video sometimes and not other times ! – shaneonabike Jan 29 '20 at 20:46
Have all that but still not working :( – BVernon Sep 24 '21 at 22:46

score 3 · Answer 10 · answered May 17 '18 at 09:59

To have the accepted answer by mjhm working on Chrome 66 in May 2018, I added allow=autoplay to the iframe and enable_js=1 to the query string:

<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>

score 1 · Answer 11 · edited Jun 21 '16 at 14:22

1

1 - add &enablejsapi=1 to IFRAME SRC

2 - jQuery func:

  $('iframe#your_video')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');

Works fine

edited Jun 21 '16 at 14:22

Vasfed

17,382
10
47
51

answered Jun 21 '16 at 14:16

Gabriel Morais

19
2

1

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 – mate.gvo Jul 06 '18 at 17:03

score 1 · Answer 12 · answered Jan 05 '22 at 22:00

This is the perfect solution if someone is looking for, autoplay* is the key here, which is not mentioned anywhere.

  <iframe allow="autoplay *; fullscreen *" allowfullscreen="true" 
      src="https://example.com">
   </iframe>

& if you want to lazy load the youtube video completely use this-

  <iframe
        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/unICbsPGFIA?autoplay=1><img src=https://img.youtube.com/vi/zEkgWzi5T-Y/hqdefault.jpg><span>▶</span></a>"
        src="https://www.youtube.com/embed/unICbsPGFIA?autoplay=1&loop=1&playlist=zEkgWzi5T-Y"
        frameborder="0"
        allow="accelerometer; autoplay *; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>

score 0 · Answer 13 · answered Mar 11 '15 at 07:41

To use javascript api,

<script type="text/javascript" src="swfobject.js"></script>
  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

To play the youtube with the id:

swfobject.embedSWF

reference: https://developers.google.com/youtube/js_api_reference magazine

score 0 · Answer 14 · edited Sep 30 '17 at 20:12

0

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/9IILMHo4RCQ?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" 
        frameborder="0" allowfullscreen></iframe>

edited Sep 30 '17 at 20:12

Paul Roub

35,848
27
79
88

answered Sep 30 '17 at 19:25

George Sariev

65
4

score -1 · Answer 15 · answered Dec 20 '18 at 21:00

December 2018,

Looking for an AUTOPLAY, LOOP, MUTE youtube video for react.

How to embed an autoplaying YouTube video in an iframe?

15 Answers15

Linked

Related