YouTube Autoplay does not work with iFrame

Question

My website has a player for multiple videos. I've been adapting the code to use YouTube's iframe API as the player. I can't get the videos to autoplay.

Here's the relevant code:

<body>
    <iframe id="existing-iframe-example"
        width="640" height="360"
        src="https://www.youtube.com/embed/-SFcIUEvNOQ?   autoplay=1&;enablejsapi=1"
        frameborder="0"
        autoplay="1"
        style="border: solid 4px #37474F"
    ></iframe>
    <div id="player"></div>

    <div id="movieButtons" class="movieButtons">
    <button class="movieButton" data-movieAdr="1-VjtC939_Q">Memorial Slide Show</button>

The rest is standard YouTube iframe API script. You can see I tried setting autoplay=1 as both an iframe parameter and as part of the iframe src. I've also tried including it in the data in the button. None of these seems to work. The vids load when the buttons are clicked, but they don't autoplay.

spaces after `?` in the URL. Try with: `https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&enablejsapi=1` — boertel, Nov 18 '16 at 20:06
it does not work on android mobile chrome browser. any idea? — Yuseferi, Oct 08 '19 at 19:30

score 189 · Answer 1 · edited Jun 17 '22 at 09:44

189

It's not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add &mute=1 to your URL. Autoplay Policy Changes

<iframe
    id="existing-iframe-example"
    width="640" height="360"
    src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&mute=1&enablejsapi=1"
    frameborder="0"
    style="border: solid 4px #37474F"
></iframe>

Update :

Audio/Video Updates in Chrome 73

Google said : Now that Progressive Web Apps (PWAs) are available on all desktop platforms, we are extending the rule that we had on mobile to desktop: autoplay with sound is now allowed for installed PWAs. Note that it only applies to pages in the scope of the web app manifest. https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa

edited Jun 17 '22 at 09:44

Yves M.

29,855
23
108
144

answered May 10 '18 at 12:25

Fab

2,029
1
8
7

Any idea why this one doesn't work? https://www.youtube.com/embed?listType=search&list=official%20trailer%20The%20Kid%20Who%20Would%20Be%20King%202019&autoplay=1&showinfo=0&wmode=transparent&modestbranding=true&autoplay=1&mute=1&muted=1 – stallingOne Apr 26 '19 at 11:54
It may be wrong, but I think it's because Youtube doesn't know which video to play at the beginning. When you load the page Youtube need to search the video with you "list" parameter, then take the first video of you playlist then play it. To make it work add a video ID of the first video that you want to play in the URL : https://www.youtube.com/embed/Cg-h8TwQCgs?listType=search&list=official+trailer+The+Kid+Who+Would+Be+King+2019&autoplay=1&mute=1&showinfo=0&wmode=transparent&modestbranding=true – Fab May 04 '19 at 13:18
Thank you! So it only lets you autoplay muted videos! Makes sense. – Xonatron Feb 05 '20 at 01:02
Thank you! The PWA update might explain why autoplaying was working locally for me but not on the server. – Sacha Feb 01 '22 at 16:37

score 102 · Answer 2 · edited Aug 25 '18 at 17:50

102

mute=1 or muted=1 as suggested by @Fab will work. However, if you wish to enable autoplay with sound you should add allow="autoplay" to your embedded <iframe>.

<iframe type="text/html" src="https://www.youtube.com/embed/-ePDPGXkvlw?autoplay=1" frameborder="0" allow="autoplay"></iframe>

This is officially supported and documented in Google's Autoplay Policy Changes 2017 post

Iframe delegation A feature policy allows developers to selectively enable and disable use of various browser features and APIs. Once an origin has received autoplay permission, it can delegate that permission to cross-origin iframes with a new feature policy for autoplay. Note that autoplay is allowed by default on same-origin iframes.

<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">


<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
When the feature policy for autoplay is disabled, calls to play() without a user gesture will reject the promise with a NotAllowedError DOMException. And the autoplay attribute will also be ignored.

edited Aug 25 '18 at 17:50

Jossef Harush Kadouri

32,361
10
130
129

answered May 14 '18 at 21:20

Dzejms

3,108
2
30
40

Works for me as of March 2019. – Pete Mar 09 '19 at 00:12
Working April 2019 – Rog Apr 14 '19 at 16:51
Working May 2019 – Shady Mohamed Sherif May 07 '19 at 20:57
19

This works fine for desktop but for mobile, it is not working. – Dipen Patel Jun 25 '19 at 13:57
8

Just to note, this will only work with sound enable if someone has already interacted with the website. So if they click through to the page with the video then it will autoplay with sound. If they land directly on the page then it will not autoplay at all. So the choice seems to be autoplay for all muted or autoplay for some with sound and not people landing directly on the page. – Robert Went Jul 19 '19 at 21:39
I think this is the right answer for me because it works for me autoplay with sound. – Jaison James Aug 08 '19 at 07:38

score 13 · Answer 3 · answered Sep 01 '18 at 08:35

13

This code allows you to autoplay iframe video

<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1"  width="560" height="315"  frameborder="0" allowfullscreen></iframe>

Here Is working fiddle

answered Sep 01 '18 at 08:35

YoJey Thilipan

617
8
10

8

This works fine for desktop but for mobile, it is not working. – Dipen Patel Jun 25 '19 at 13:57
the fiddle is not working by today – revobtz Nov 24 '21 at 23:10
It plays but it is muted. – dansalmo Dec 04 '22 at 20:17

sarkiroka · Answer 4 · 2018-12-12T21:29:10.910

You can use embed player with opacity over on a cover photo with a right positioned play icon. After this you can check the activeElement of your document.

Of course I know this is not an optimal solution, but works on mobile devices too.

<div style="position: relative;">
   <img src="http://s3.amazonaws.com/content.newsok.com/newsok/images/mobile/play_button.png" style="position:absolute;top:0;left:0;opacity:1;" id="cover">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/2qhCjgMKoN4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen style="position: absolute;top:0;left:0;opacity:0;" id="player"></iframe>
 </div>
 <script>
   setInterval(function(){
      if(document.activeElement instanceof HTMLIFrameElement){
         document.getElementById('cover').style.opacity=0;
         document.getElementById('player').style.opacity=1;
       }
    } , 50);
  </script>

Try it on codepen: https://codepen.io/sarkiroka/pen/OryxGP

Just for the sake of completeness: this solution is prohibited by youtube's TOS (see https://webmasters.stackexchange.com/questions/44157/is-it-within-youtubes-tos-to-overlay-static-content-on-a-video) as youre not allowed to overlay an embedded player. — Fabian S., Jul 29 '19 at 13:35

score 3 · Answer 5 · answered Oct 15 '21 at 19:29

3

<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1"  width="560" height="315"  frameborder="0" allowfullscreen></iframe>

https://jsfiddle.net/YoJey_Thilipan/6naLm0yc/6/

it is working fine with me thanks.

answered Oct 15 '21 at 19:29

ahmed

137
14

Thanks, this worked for me on desktop. However, autoplay on mobile still doesn't work. – Smlok Nov 23 '21 at 23:52
not working by today – revobtz Nov 24 '21 at 23:11

score 0 · Answer 6 · answered May 17 '22 at 07:18

0

For those who are attempting to use autoplay property on mobile view: Autoplay function for mobile devices is a serious thing and it is disabled for most cases. The various reason includes data usage, spam advertisement, etc.

answered May 17 '22 at 07:18

Mingze Li

360
1
10

YouTube Autoplay does not work with iFrame

6 Answers6

Linked