Issue with embedded link for an animation

Hello!

I found a website that offers free animations, and while it's a little tricky to format it just the way you need, I've found embedding the animation in Storyline would be my best option (I use Storyline 360).

However, every time I attempt to upload the embedded file into the Video from Website option, I receive an error message that the video cannot be inserted from the embed code/verify that it is correct. I'm not the most techie, so if anyone has any advice or answers, that would be much appreciated! Thanks!

Here's the embed code I'm using:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_uJgRyM.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

1 Reply
Sam Hill

Hi Shauna, I think the best way to implement this is by using a WebObject.

I've prepared an example for you, but the steps are:

1. Create an index.html file
2. Add the code to the <head> that is provided by lottie
3. Save the index.html file to a folder within your project
4. Insert a WebObject onto your slide, and browser to the folder containing the index.html file
5. Resize the WebObject to the height of the animation but add 20px to the height and width (avoids scroll bars).
6. Preview as HTML (cannot preview in Storyline as it is a WebObject).

Files available here: https://www.dropbox.com/t/VMrZZQt6ls6atduE