259

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
472084
  • 17,666
  • 10
  • 63
  • 81

16 Answers16

464

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.

mjhm
  • 16,497
  • 10
  • 44
  • 55
74

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>
MatayoshiMariano
  • 2,026
  • 19
  • 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
  • 1
    You may also need to set "&mute=1", that's what I needed as well. See https://stackoverflow.com/questions/40685142/youtube-autoplay-does-not-work-with-iframe – ObjectNameDisplay Oct 31 '22 at 18:02
56

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>
Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
  • 4
    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
  • Needed this. The [selected answer](https://stackoverflow.com/a/7286526/18620006) wasn't working in my chrome development environment. This should be the selected one, as it will work in any browser – sayandcode Jul 14 '22 at 10:06
  • Confirmed Chrome 107.0.5304.88 requires `mute=1` param to autoplay. – OXiGEN Nov 08 '22 at 00:33
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>
develCuy
  • 576
  • 5
  • 14
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
13

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>
Victoria
  • 7,822
  • 2
  • 21
  • 44
Ralph
  • 139
  • 1
  • 2
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
});
bdanin
  • 771
  • 7
  • 10
  • 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
6

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).

Salman A
  • 262,204
  • 82
  • 430
  • 521
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

Community
  • 1
  • 1
Hastig Zusammenstellen
  • 4,286
  • 3
  • 32
  • 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
4

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>
MattAllegro
  • 6,455
  • 5
  • 45
  • 52
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>
Jonas WebDev
  • 363
  • 4
  • 12
4

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>
Ashwini Kumar
  • 105
  • 7
1

1 - add &enablejsapi=1 to IFRAME SRC

2 - jQuery func:

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

Works fine

Vasfed
  • 18,013
  • 10
  • 47
  • 53
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
0

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_referencemagazine

HTML5 developer
  • 237
  • 3
  • 2
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>
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
George Sariev
  • 65
  • 4
-1

December 2018,

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

Other answers didn't worked.

I found a solution with a library: react-youtube

class Video extends Component {

    _onReady(event) {
        // add mute
        event.target.mute();
        // add autoplay
        event.target.playVideo();
    }

    render() {
        const opts = {
            width: '100%',
            height: '700px',
            playerVars: {
                // remove video controls 
                controls: 0,
                // remove related video
                rel: 0
            }
        };

        return (
            <YouTube
                videoId="oHg5SJYRHA0"
                opts={opts}
                // add autoplay
                onReady={this._onReady}
                // add loop
                onEnd={this._onReady}
            />
        )
    }

}
Davide Carpini
  • 1,581
  • 17
  • 15
-1

Yes, you can embed an auto-playing YouTube video with an Iframe tag as per Google's autoplay Iframe policy

Try this way:

<iframe src="https://www.youtube.com/embed/video-id" frameborder="0" allow="autoplay; fullscreen"></iframe>

While this process is only applicable for one video at a time, to embed a collection of YouTube videos using an Iframe code, you need to use a third-party tool like Taggbox Widget, which is integrated with Google's API that allows users to embed YouTube videos, shorts using channel & playlist URLs in the form of a YouTube widget.

Furthermore, you can easily embed that responsive YouTube widget on your website with the generated Iframe code.

<iframe src="https://widget.taggbox.com/unique-id" style="width:100%;height:600px;border:none;"></iframe>
Leo
  • 9
  • 1