CODEWITHSUNDEEP
videoyoutubeyoutube-api
ben
ben

Reputation: 29777

How can I autoplay a video using the new embed code style for Youtube?

I can't work out how to autoplay a video using the new embed code style for Youtube. I tried adding &autoplay=1 to the url, which worked with the old style, but it didn't work. For example, http://www.youtube.com/embed/JW5meKfy3fY is the embed link, but http://www.youtube.com/embed/JW5meKfy3fY&autoplay=1 doesn't work. Can anyone tell me how to do it? Thanks

Upvotes: 211

Views: 986750

Answers (15)

matthewbauer
matthewbauer

Reputation: 4602

Just put ?autoplay=1 in the url the video will autoload.

So your url would be: https://www.youtube.com/embed/JW5meKfy3fY?autoplay=1.

In case you wanna disable autoplay, just change from 1 to 0: ?autoplay=0.

If you embed the Youtube video in an iframe, you need to add allow="autoplay" to the HTML. Example: <iframe src="https://www.youtube.com/embed/JW5meKfy3fY?autoplay=1" allow="autoplay"></iframe>

Upvotes: 425

Adib Zaini
Adib Zaini

Reputation: 258

As of April 2024

The src should look like this: http://www.youtube.com/embed/JW5meKfy3fY?&autoplay=1&mute=1

Make sure it is ?&autoplay=1 and not ?autoplay=1. Notice the &

Reference: https://support.google.com/youtube/answer/171780?visit_id=638476695694768340-290277826&hl=en&rd=1#zippy=%2Cmake-an-embedded-video-play-automatically

Upvotes: 12

Zabid Ahmed
Zabid Ahmed

Reputation: 31

The perfect one which works for me is adding a mute=1 paramater.

<iframe src="http://www.youtube.com/embed/JW5meKfy3fY?autoplay=1&mute=1" allow="autoplay"></iframe>

Upvotes: 0

Hadayat Niazi
Hadayat Niazi

Reputation: 2480

It's not working since April of 2018 because Google decided to give greater control of playback to users. You just need to add autoplay=1&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>

You can get more detail from the already submitted answer YouTube Autoplay not working

Upvotes: 3

FacePalm
FacePalm

Reputation: 11728

Chrome blocks audio content being played without any user interaction.

So, a work-around is to start the video muted by adding

&mute=1

This will work 100% of the time.

Upvotes: 41

Nahoor
Nahoor

Reputation: 271

YouTube auto play works only desktop in need to work mobile just make changes in JavaScript. Like

<div id="player"></div>
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'VideoID',
      playerVars: {   
            'autoplay': 1,   
            'rel': 0,
            'showinfo': 0,
            'modestbranding': 1,
            'playsinline': 1,
            'showinfo': 0,
            'rel': 0,
            'controls': 0,
            'color':'white',
            'loop': 1,
            'mute':1,
            // 'origin': 'https://meeranblog24x7.blogspot.com/'
      },
      events: {
        'onReady': onPlayerReady,
        // 'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    player.playVideo();
    player.mute();
  }var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

See More :- YouTube auto play for 5 seconds

Upvotes: 3

Amel
Amel

Reputation: 61

Okay this is an example for the new embed code for youtube videos. 

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="560" height="345" src="http://www.youtube.com/embed/8v_4O44sfjM" frameborder="0" allowFullScreen></iframe>

if you want to autoplay it, at the src="http://www.youtube.com/embed/8v_4O44sfjM" add the ?autoplay=1 parameter

So the code will look like this:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="560" height="345" src="http://www.youtube.com/embed/8v_4O44sfjM?autoplay=1" frameborder="0" allowFullScreen></iframe>

i tried this on my blog and it works ! Hope this help (:

Upvotes: 6

Andrew West
Andrew West

Reputation: 739

You need to add an extra parameter, alongside the autoplay=1

allow="autoplay"

making it:

<iframe src="your-video-url?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1" frameborder="0" allow="autoplay; encrypted-media"></iframe>

Upvotes: 20

Waheed ur Rehman
Waheed ur Rehman

Reputation: 765

You are using a wrong url for youtube auto play http://www.youtube.com/embed/JW5meKfy3fY&autoplay=1 this url display youtube id as wholeJW5meKfy3fY&autoplay=1 which youtube rejects to play. we have to pass autoplay variable to youtube, therefore you have to use ? instead of & so your url will be http://www.youtube.com/embed/JW5meKfy3fY?autoplay=1 and your final iframe will be like that.

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

Upvotes: 4

Bay
Bay

Reputation: 497

None of yours are solved my problem. But, I found a good solution for me to work properly right now. In between tags write this code:

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/**[CHANGE HERE WITH YOUR YOUTUBE VIDEO ID]**?autoplay=1&controls=0&showinfo=0&autohide=1">
  </iframe>
</div>

Upvotes: 2

Kate at Gavin Academy
Kate at Gavin Academy

Reputation: 96

None of the above worked for me in the current youtube embed. Try this, it actually worked for me :)

Hope it helps! 

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

Upvotes: 6

Jules
Jules

Reputation: 2021

The only way I was able to get autoplay to work was to use the iframe player api.

<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
        height: '480',
        width: '853',
        videoId: 'JW5meKfy3fY',
        playerVars: {
            'autoplay': 1,
            'showinfo': 0,
            'controls': 0
        }
    });
}
</script>

Upvotes: 6

Ajie Kurniyawan
Ajie Kurniyawan

Reputation: 41

Just add ?autoplay=1 after url in embed code, example :

<iframe width="420" height="315" src="http://www.youtube.com/embed/
oHg5SJYRHA0" frameborder="0"></iframe>

Change it to:

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

Upvotes: 3

Sacha
Sacha

Reputation: 327

Actually, you will have to use the "?" instead of "&" for your first parameter only. If you use more than one parameter, you will then have to add "&" to the chain.

For instance, if you want to add autoplay and closed captioning, you will have to add this portion to your embedded video URL: ?autoplay=1&cc_load_policy=1.

It would look like this:

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

Upvotes: 31

Anton Gogolev
Anton Gogolev

Reputation: 115741

YouTube Help says that &autoplay=1 has to be after the video ID - I assume, immediately after.

Upvotes: 5

Related Questions