Why isn't my YouTube link autoplaying within an iframe in Chrome?

Question

I'm trying to embedded a video on my site and when the site opens, the video start to play automatically. I'm using Google Chrome v76. This is my code so far:

<iframe src="https://www.youtube.com/embed/SjVwyhbUUXE?autoplay=1" width="100%" height="100%" frameborder="0" align="center"></iframe>

The frame shows the video, but is not auto playing it; the user needs to manually click on play to start playing.

What else should I do?

Are you using a browser that blocks autoplaying content by default? Several major ones do that these days. — TylerH, Aug 12 '19 at 16:40
In addition to what TylerH has stated, most modern browsers block autoplay videos -- however I recall it being permissible if the audio is muted. — James Allen, Aug 12 '19 at 16:41
@TylerH I'm testing on the most up to date version of Chrome — delphirules, Aug 12 '19 at 16:45

score 2 · Accepted Answer · answered Aug 12 '19 at 16:45

As mentioned in the comments, most modern browsers block autoplay videos these days unless they are muted. Just change your iFrame code to this

<iframe src="https://www.youtube.com/embed/SjVwyhbUUXE?autoplay=1&mute=1" width="100%" height="100%" frameborder="0" align="center"></iframe>

score 2 · Answer 2 · answered Aug 12 '19 at 16:54

The YouTube iframe API will give you what you need. Here's some example code to get you started

<div id="video-player"></div>

<script>
    // Load the Google SAPI scripting
    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('video-player', {
            height: '100%',
            width: '100%',
            videoId: 'SjVwyhbUUXE',
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }
</script>

@MikePoole It *should* be fairly obvious from the inclusion of an API named "YouTube iframe API" and a bunch of code vs just trying to use a URL in an HTML iframe as OP's attempt illustrates... — TylerH, Aug 12 '19 at 18:25

Sai Narasimha Tech · Answer 3 · 2019-08-12T17:04:27.967

-3

This is the solution for this if you don't play automatically

<iframe src="https://www.youtube.com/embed/SjVwyhbUUXE?autoplay=0&rel=0" width="100%" height="100%" frameborder="0" align="center"></iframe>

edited Aug 12 '19 at 17:04

answered Aug 12 '19 at 16:53

Sai Narasimha Tech

34
4

I doubt this will help the OP. You have `autoplay = 0` so your answer would be a step backwards for him. – Mike Poole Aug 12 '19 at 16:57
ok i saw the question my solution is for not playing automatically – Sai Narasimha Tech Aug 12 '19 at 17:02

Why isn't my YouTube link autoplaying within an iframe in Chrome?

3 Answers3