When using web objects to embed a You Tube video, I am not able to make the autoplay parameter (autoplay=1)work; although two other parameters (modestbranding=1&start=11) are working.
I am attaching a sample Storyline file, and the folder that holds the index.html file.
Please help me understand why this one parameter is not working when others are, and how to correct it.
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 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
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 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.
