You Tube Video autoplay Parameter Not Working

Hi John,

I'm sorry to hear you're hitting this snag! I'd love to help troubleshoot this autoplay issue and start with a clarifying question to understand your experience better.

Are you publishing to LMS, Web, or Review 360?

I'm looking forward to your response!

I have tested your example

 - Chrome direct start (without webserver) - no autoplay
 - Chrome on local webserver - ok
 - Chrome on Scorm Cloud - ok
 - Chrome on Review 360* - no autoplay

you should test it on your LMS

* autoplay for external videos/webObject is not enabled on Review 360
  (allow="autoplay" is missing in the outer iframe)

Thanks Eric,

I publish to my local hard drive. Have been working a lot with web objects over the last several weeks and it's all working fine except for this failure of autoplay to work.

So I know well that web objects do not work in preview.

As an external consultant I do not have access to an LMS.

Thanks for your help with this. And as Jurgen points out, this could be a browser issue, which is still a problem if a client does not have strict control over distribution.

I am developing a workshop on Storyline web objects (link follows), for online workshops I facilitate every month, and need to be able to explain this to workshop participants, including insight on problems that may arise, such as this browser issue.

https://tdsandiego.org/event-5170943

Any further thoughts on this issue would be appreciated.

Thanks Jürgen,

I really appreciate you taking the time to test this on different browsers (I have been testing on Firefox), and your work seems to indicate this is a browser issue (why am I not surprised). And yes, that extends to an LMS issue, although I am external; and as explained in my reply to Eric, am developing this as an example to be used in a workshop rather than finished learning support for release.

Also, please help me to understand the asterisk in your post. What is meant by "(allow="autoplay" is missing in the outer iframe)? Is this something that can be corrected in the embed code?

how a storyline course on Review 360 ist hosted:

Review 360: html (review360) -> outer iframe* (storyline course) -> inner iframe* (external video)

all three on different domains -> "cross-origin integration"

in cross-origin environments applies: all critical features in iframes are disabled by default

examples of disabled features
- camera
- microphone
- geolocation
- accelerometer
- clipboard-read
- clipboard-write
- gyroscope
- autoplay (only Chrome/Chromium)
 -picture-in-picture (only Chrome/Chromium)
...

the rule is, the allowing of features happens from the outside to the inside (everything that is not mentioned is not allowed)

here more infos

and here a screenshot of the html structure of Review 360

in the marked iframe (the outer iframe) there is only fullscreen allowed, nothing else

and here your correct youtube integration

<iframe width="560" height="315" src="https://www.youtube.com/embed/kykOE2e62DE?autoplay=1&modestbranding=1&start=11" allow="autoplay; picture-in-picture;" allowfullscreen></iframe>

you allows autoplay, but this has no effect because the outer iframe does not allow it

only allowfullscreen works because it is also defined outside

in the outer iframe is missing allow="autoplay, clipboard-read, clipboard-write ..."

-> only articulate can fix this

* iframe = website in website

one more hint - there is an easier way to integrate youtube in storyline "Insert Video from Website"

as long as you don't want to use the special youtube javascript api, this is easier

Thanks Jürgen,

I so appreciate your detailed information. What you indicate about cross-origin integration is a real revelation for me, and explains a lot, especially when I don't have access to the outer iFrame. I now think of it as being similar to Russian dolls (each inside of a larger one), and it's only the largest (outside) doll that determines what is seen.

And yes, your "Insert Video from Website" suggestion is the best way to go. But I am facilitating a workshop on web objects and need to be able to demonstrate how all likely situations work (or don't).

What I have discovered while thrashing around is that if I put the video as web object in a layer that is called from the base layer, the autoplay works. It solves my issue, but I can't explain why. It shouldn't have any effect on the cross-origin integration.

for you workshop  you should modify the index.html of the web object

in your version there is only the iframe - it works, but is actually wrong

here is a complete version

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="referrer" content="same-origin">

    <title>youtube</title>

    <style>
      body {
        position: absolute;
        margin:  0;
        padding: 0;
        width:  100%;
        height: 100%;
        overflow: hidden;
      }
      iframe {
        border: none;
        width:  100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
     <iframe src="https://www.youtube.com/embed/kykOE2e62DE?autoplay=1&modestbranding=1&start=11" allow="autoplay; fullscreen; picture-in-picture;" allowfullscreen></iframe>
  </body>
</html>

>What I have discovered while thrashing around is that if I put the video as web object in a layer that is called from the base layer, the autoplay works. It solves my issue, but I can't explain why. It shouldn't have any effect on the cross-origin integration.

very interesting, I will have a look at that - autoplay on chrome is a very special thing

Thanks Jürgen,

I appreciate you once again going above and beyond.