Forum Discussion
Video with transparent background in Storyline 360
Hi guys,
Just wondering if anyone has had any luck getting a video clip with a transparent background into Storyline 360 and if so, what format did you use so that 360 maintains the transparency.
Thanks
Dave
108 Replies
- AlencarFerreiraCommunity Member
I would like to see it but the password does not work.
- CoryWarshaws117Community Member
Hey Alencar, I tested the link and password just now and it seems to work on my end. Make sure to use uppercase for "SAFE", include the dash line with no spaces before or after, and lowercase "ly"
Try copying this and pasting it into the password field: SAFE-ly
(WARNING: my project wasn't built for mobile and glitches by stopping the ability to progress if viewed on iOS devices; Android not tested)
- AlencarFerreiraCommunity Member
Hey Cary It seemed very interesting to me, if you can share your process that would be great. I really don't understand why they haven't made this feature available to everyone yet. Thanks for sharing your project.
- CoryWarshaws117Community Member
Happy to Alencar!
Recording the video:
- I used Zoom as it allows me to replace my background, but you can probably replicate in other video conferencing software as well.
- You could also use a green screen, key out the background, and replace with a solid color. To allow you to more cleanly blend the video background with the Storyline project background, you would want to replace the background digitally vs. using a solid cloth or paper color backdrop during a video shoot.
Working in Storyline:
- Insert your recorded video with the replaced background color into your Storyline project.
- Adjust the background color of your Storyline project to match the video background color.
- You must preview/publish your project now, to ensure the background color actually matches/aligns in your final output. Make any publishing adjustments to video and image quality setting now to ensure an accurate color match.
- Depending on what you're doing with the video and background in your project, you can also use matching color shapes to blend the background, when/if needed.
- From there, the video asset can be treated almost like a regular object in your project.
Let me know if you have any other questions or if you give it a try and run into any issues - reach out at cory.warshawsky@gmail.com
- CoryWarshaws117Community Member
Bump to keep the topic of interest known to the Articulate Team.
- DanielBottCommunity Member
Hi, I'd also like to see this feature added to Storyline. If it has been, please can someone educate me?
- Jürgen_Schoene_Community Member
the cause are the browsers - there is only ONE video format that is playable on ALL browsers -> mp4
mp4 does not support transparency
- Matt_KurtinCommunity Member
Here's a workaround I have developed to add transparent videos using JavaScript:
https://www.innovativelg.com/blog/2023/11/enabling-videos-with-transparent-backgrounds-in-articulate-storyline/- Jürgen_Schoene_Community Member
with one small limitation - Apple iOS does not play webm video format
for transparent video on iOS HEVC/H.265 should work (but still needs to be tested with the different ios versions)
- Matt_KurtinCommunity Member
Thanks for the heads up on the format. Should be able to use the same JavaScript approach to attach other formats. Follow this example of how to add multiple video formats within a single video tag. The browser will choose the first source it supports.
- grainnedowdallCommunity Member
https://www.innovativelg.com/resources/enabling-videos-with-transparent-backgrounds-in-articulate-storyline/
- Matt_KurtinCommunity Member
Thanks for updating to the path on our new blog!
- AmyGttCommunity Member
OMG! This will be a game changer. Thank you so much. I will try it out.
- BrendanMannion-Community Member
Thanks Matt, if this works, lots of people will be very happy!
- Matt_KurtinCommunity Member
Credit to Chris Hodgson of Discover Learning for his video on 3D Parallax Hover Effects Using Tilt.JS for the idea of using the Alt text to mark a shape in Storyline as being the position where you want the video to go. That video inspired me to start thinking about what other things could be done once Storyline elements could be located easily from JavaScript. Which is what led me to work on the transparent video solution.
If you try out this solution and run into any issues feel free to reach out to me directly. I am happy to help you resolve: https://www.linkedin.com/in/mattkurtin/ - LernweltMultiplCommunity Member
Now it is 2024 and this problem isn't solved. There are a lot of words from the staff ensuring that their customers are important for articulate. But fact is nothing happens. It was / is the same problem with svg images. Over years nothing happens. And til now using svg images is causing more trouble then benefit. All in all articulate is not possible to deal with formats that are common and up to date. It is erster to live in the past then support the own customers concerning valid complaints. Flashvideo as a solution to work with transparent video background in 2024 is really poor and disappointing. It seems to be more important to integrate AI support in Rise instead solving very old todos. Hey, articulate I hope your AI features are able to make the background of videos transparent. Kind regards
- Jürgen_Schoene_Community Member
yes it is 2024 and Apple (Safari) prevents the use of a free and open video format that supports transparent video - they still do not support WebM VP8/VP9 format
Related Content
- 8 months ago
- 3 months ago
- 8 months ago
- 14 days ago