How to embed Brightcove video into Storyline for use on iPad, HTML

Hi everyone,

I am new to Articulate Storyline and I need some help with inserting a video into my course. 

We use Brightcove to store all of our videos - I need to insert some of these videos into my Storyline course and will need it to work on the computer and the iPad.

I have tried inserting the video as a web object, following the same rules as how to insert a YouTube video (only changing the YouTube part to Brightcove), but when I publish it, nothing comes up (not even a box/error)....


Any ideas?

11 Replies
Tex Hale

Hi Ashley

I have just started using Brightcove and the embed code does not work in Storyline 350 at all.

The error message is:  "A video cannot be inserted from this embed code. Verify that the embed code is correct and then try again".

So it's not that I can use it in the environment it is intended for, because the video won't even embed.

I have contacted Brightcove but still waiting for a reply - they are very slow in this area - not at all like you guys at Articulate.

Crystal Horn

Hi there, Tex.  Thanks for reaching out -- I'm going to see if this is something we can test out on our end as well, and we'll keep you updated!  In the meantime, if you're able, can you share the embed code?  Do you know if it has worked in previous versions of Storyline (1 or 2)?  Lastly, what happens if you try to insert that video as a web object; does it successfully display?

If you prefer to keep that info private, you can share it with us in a support case.

Crystal Horn

Hi Tex.  Just to follow up, I used Brightcove's sample video to generate an embed code for my Storyline 360 project.  It took me a few tries, but here's a Peek screencast of my process.  I chose the video, clicked on the Publish tab, and then chose Responsive for a player size.

I copied the embed code it gave me, and it looked like this:

embed

My slide then showed this:

slide

I published to Articulate 360 just to do a quick Review of how that should look, and you can see that here:  https://360.articulate.com/review/content/0d12e143-b99e-42f7-a52e-02ba21f84cce/review    << The first slide I left alone, and on the second slide you'll see I resized and moved the video to the middle.

So I would start with comparing your embed code with mine above; it might be that the code is missing some lines that Storyline needs to validate it (often the height and width attributes).  Before I chose "Responsive" for the player size, I just copied the existing embed code over, and I got the same error message that you did.

Let us know how you make out!

Ryan DeWitt

This method did work when I tested. Thank you Crystal.  SL3 w/ the below code. 

<div style="display: block; position: relative; max-width: 300px;"><div style="padding-top: 56.25%;"><iframe src="//players.brightcove.net/00000000000/default_default/index.html?videoId=00000000000000"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"></iframe></div></div>