Adding videos to a slide causes a black/grey border to appear

Mar 14, 2023

Alistair Arkwright
By Alistair Arkwright

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.

Video Enabled

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?

14 Replies
Jürgen Schoenemeyer
1 year ago03/14/23 at 12:54 pm (UTC)

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

 

Alistair Arkwright
1 year ago03/15/23 at 5:03 am (UTC)

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.

Zachary Guidry
3 months ago01/30/24 at 3:24 pm (UTC)

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).

Elizabeth Franklin
3 months ago01/30/24 at 10:19 pm (UTC)

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.   

Jose Tansengco
2 months ago02/21/24 at 2:31 pm (UTC)

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!

Robb Farrell
18 days ago04/10/24 at 8:43 pm (UTC)
Jose Tansengco

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?

Sign In to Reply