iframe Storyline 360 in Canvas Showing as Black Box w/ Play Button

Mar 01, 2021

Della J Gerometta
By Della J Gerometta

Hello,

There was a question about this in another post a couple years ago, but no answers. There are a lot of questions about Storyline embedding into Canvas, but I can't figure out this issue, and I'm wondering if it's something in Storyline and not Canvas.

I use the standard iframe embed in Canvas, but what shows on the page is a black box with the Play button. I would like to see the first slide instead. I am using the Modern player, publishing for the Web. I've attached a screen shot of how it looks on the page. FYI:  When I click the story.html file in Canvas Files, it shows as the black box with the play button as well, so I'm thinking it's something I'm doing wrong in Storyline. Any help would be greatly appreciated!

This is my embed iframe:   <iframe src="https://asuce.instructure.com/courses/3791/files/469265/download" width="740;" height="480" data-api-endpoint="https://asuce.instructure.com/api/v1/courses/3791/files/469265" data-api-returntype="File"></iframe>

5 Replies
Math Notermans
3 years ago03/02/21 at 5:25 am (UTC)

As i do use Canvas too i do think your iframe is correct. The 'Black Box on Start' is a Storyline issue they sell as feature ;-)

Do check the discussion here...
https://community.articulate.com/discussions/articulate-storyline/remove-play-button-on-html5-opening-screen-in-storyline-360?page=3

And especially my posts on the subject because that will eliminate the 'Blackbox'.

In the end its adding 'this.onStart();' to the slides.min.js file at the proper position.

Like the code below:


onMobileStart: function (t) {
var e,
n = this;
(this.rejectDeferred = t.rejectDeferred),
o.addClass(document.body, "resume-shown"),
(e = { visible: !0 }),
t.mobileStartAsPrompt && (e.isResumePrompt = !0),
this.setState(e, function () {
var t = null != n.refs.resume ? n.refs.resume : n.refs.playIcon;
c.env.is360 || t.focus(), l.trigger(u.startOverlay.READY);
});
this.onStart();
},

Della J Gerometta
3 years ago03/12/21 at 10:03 pm (UTC)

HI Math,

Thank you for your response. I am not very knowledgeable about coding. Where does this go? Also, does this show the first slide instead of the black box? I know I have been able to add SL to Canvas before and have it show the first slide, but my iframe doesn't look any different. This is frustrating because it's so ugly on the page, and there should be a way to show the first slide, I don't mind so much having a play button, but I want to see the first slide, not a black box.

 

Della J Gerometta
3 years ago03/16/21 at 9:58 pm (UTC)

Thank you, Math. I appreciate this! Unfortunately, altering this file for all of the Storyline projects I'm creating and using is not sustainable. Especially if these files will need to be altered again every time Articulate does an update to SL. I found that the issue is most likely caused because there is audio on the first slide for all of these particular projects. I created a work around where I'm creating the first slide as a duplicate without audio and a very short timeline, so the slide will advance automatically. This allows the first slide to display instead of the ugly, black box. It's not ideal, but it works for now. I wish Canvas and Articulate could work together to fix this issue.

Sign In to Reply