Embedding video files from Brightcove server into Storyline Articulate 2 not publishing correctly
Apr 07, 2016
I'm working on a project that has ~45 embedded videos. I've added them through add Web Object. (I tried using add video and use iframes but I get the error msg
The problem is all of them are showing vertical black bars on the all the videos. The videos were shot at a 16:9 aspect ratio 720x405 and I have selected that as the size of my Storyline project. They look fine in Chrome. Unfortunately we are still using IE8 and I must publish them out to accommodate this browser. So because of this restriction I can only publish the file out as a straight html project. I've published it as html5 and it works fine in the Chrome browser. When published it with straight html it looks like the attached screen capture.
I've tried everything to get rid of them including the iframe insert method and it didn't work.
The size of the video and the size of the Storyline file are both set to 720x405.
I'm using windows7 and the latest version of Storyline.
Any insight greatly appreciated.
Lisa
7 Replies
Hi Lisa,
I'm not incredibly familiar with Brightcove, but if it worked in Chrome I'm curious if it also worked using the Flash output in Chrome vs. in IE8 or you only looked at the HTML5 output in Chrome? I know that there was another older thread here in regards Brightcove videos and ways in which to use them in your output.
Hi Ashley,
The iframe embedded method does not work for me. I get the attached common error message. Tried to do it several times and it doesn't work on my machine.
Thanks for you suggestion,
Lisa
Hi Lisa,
I'm not an expert at embed codes, but it looks like one of your > is in the wrong location. I showed which one and where to move it to on the inserted image - and you could look at the code in the previously linked thread to see the same issue.
Thanks Ashley for pointing that out. Still doesn't work. Brightcove says to embed the iframe like this-
http://docs.brightcove.com/en/perform/brightcove-player/guides/iframe-vs-embed.html
<iframe src='//players.brightcove.net/1507807800001/default_default/index.html?videoId=2114345470001'
allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
This doesn't work either.
Hi Elissa,
Can you share a link to the video or the full video embed code using the method I shared above? The example you linked most recently doesn't have the height and width attributes that will be necessary per the previously linked information.
Hi Ashley,
I figured it out. I used this embed code for the video-
<iframe width="720" height="405" src="http://players.brightcove.net/2010734886001/default_default/index.html?videoId=4660819139001" "="" frameboarder="0" allowfullscreen=""></iframe>
But then I had to go into the Storyline Story Size and change the dimensions of the player to 650 X 405 or a 70 px difference in the width of a 16:9 ratio video (720X405) and the Story Size player.
But it worked.
Thanks for your assistance Ashley,
Lisa
Thanks Elissa for sharing the update here - and I'm glad that embed code finally worked, and matching the ratio to your story size.
This discussion is closed. You can start a new discussion or contact Articulate Support.