Forum Discussion
Adding videos to a slide causes a black/grey border to appear
I've been encountering a bug in the latest Storyline update (I can't confirm if its from the latest update, or a previous one).
Whenever I add a video to a slide, it causes a black/grey border to appear around the video, as well as all other items on screen until the video timeline ends.
Here is the course with the video visibility turned on.
Above shows a black line surrounding the entire slide, as the video is slide-sized.
Above shows the border being applied around all the other elements on the slide. I've had to take a photo with my phone, because when I screenshot it on my PC, the border dissapears.
Here is the course with the video visibility turned off.
Above shows the exact same part of the first screenshot, but with the video turned off. You can see the border is gone.
Above is the exact same part of the second screenshot. As you can see, there is no border around any of the elements.
The issue occurs in the preview, as well as in the published version.
Can someone please confirm whether this is a known bug, and if anyone else have come across it, and has a workaround/fix?
I am seeing this same issue - a 1pixel border on the top and left side of my videos appear. When I resize the browser, the border dissapears on one side or both.
All of my videos have a white background and the background surrounding the storyline display is also white which really makes the border stand out.
I am using the latest version of Storyline 360 (3.84.31647.0) and the latest version of the Chrome browser (121.0.6167.86).
I also had this issue. I did update the video to have dimensions that are multiples of 8 and also removed the old video and put in a new one. In addition to this, I also did the following:
If the video is a few pixels past the edge of the viewing window, the black line appears as a border on the edge. When I moved the video up one pixel above the edge, the black line disappears.
I hope this solution works for anyone else having this issue.
I'm currently using Storyline version v3.87.32265.0
this seems to be a browser problem with scaling videos - perhaps in combination with hardware acceleration
can you upload a .story file with the 'gray' border video problem
just for testing, add
<style>
video {
border: 1px solid #FFF;
}
</style>to the end of story.html
perhaps this trick solves your problem
Hey Jürgen,
Thanks for the above. I'm not able to share the .story file due to privacy as it's for a client, but I can share with with the Articulate crew when requested.
The issue was happening in the preview, as well as in the output in Chrome.
I've just opened the same story file on a different computer running an older version of SL, and the borders are not there (v3.73.29831.0), but some of the animations and triggers are all whacky now.
I'd rather not have to make CSS adjustments to the SCORM output, as there are multiple people on my team, and many of them don't have HTML/CSS experience. As well as just for consistency among our deliverables.
Hello, I am having the very same issue. I did add the above script to the end of the story.html but it doesn't solve the problem. Has any other solution been discovered to stop the black line from appearing, it also seems to change based on how you scale the browser window.
Hello Elizabeth!
Sorry that you're running into this snag! Which browser are you using? Have you seen this same experience in multiple browsers?
Lastly, if you could share your file, we can take a look. You can share it in this discussion or privately in a support case.
Is there a known fix for this frame border issue on videos or do I need to submit a case?
If possible I'd rather not submit a case just to find out the fix is going to be using a shape to cover up the border.
Were you able to get this issue resolved? I've just now run into it with a project and found your post.
I just opened case number 00770847
Hi Brian and Zachary,
I was never able to fix this problem, and my only solution was to change the color of the player to a dark color so that the border doesn't show as much or at least doesn't stand out. Definitely, not a fix, but more of a workaround. It is happening in all Chrome, firefox, and edge browsers, and sticks out more when re-sizing.
Hi
Sometimes I have got rod of it by moving the video down slightly or to the side. Sometimes shapes work also but sometimes nothing helps. If anyone finds a solution that would be great. I can't make the player black. Is it being worked on?
Thanks
Hi,
we are having the same issue. As we are using a lot of videos for little animations, this is very annoying and quite a big bug. It also appeared some weeks ago, I guess with an update.
For us the 1px border ist on the right and on the bottom.
Hopefully there will be a quick fix!
Hello Veronika,
Sorry to hear that you ran into this issue. We are currently tracking a bug where a grey border gets applied to imported images taller or wider than the Storyline stage. We'll be sure to leave a message here as soon as this gets fixed.
In the meantime, a workaround we've identified is to scale your image or video files in such a way that Storyline 360 will not need to scale the image on import. Feel free to share a copy of your project file here or in private by opening a support case if you need help with applying the workaround. We'll delete it when we're done testing!
Can you share the workaround?
I am still experiencing this issue on my videos that are not the full size of the stage. I use a lot of video and short looping animations and there's always a little black border that gets added onto the bottom and right border of the video.
Storyline version - 3.89.32618.0Still not fixed - Massive pain when creating content that is video heavy on white backgrounds
