Example
Are You Sure? Turning a Confirmation Prompt Into a Checkpoint π
Thank you! β€οΈ I created a custom AI Avatar in Articulate (not one of the stock options) for the video, then built a custom wrapper with Claude to give it a more tailored look. Happy to share more about the process if you're interested!
- KelleyDurdella-1 month agoCommunity Member
When creating the custom wrapper, how did you add it into the video?
- SMcNicol30 days agoCommunity Member
A wrapper is just a frame around your video β like a picture frame around a photo. The video is the photo. The frame is the nice stuff you put around it: your colors, rounded corners, a title, a caption. That's the whole idea. When we say "custom wrapper," we just mean "the frame you built yourself."
Rise gives your Code Block two ways to take your work:
- Add Code: You paste code (text) into a box. Fine when there's nothing but text.
- Upload Project: You hand Rise a whole folder, zipped up. You need this one any time a real file is involved, like a video or an image because you can't paste a file into a text box. You have to give Rise the actual file.
So: Video or Image? You're using Upload Project. Every time.
Now the one thing that trips up almost everyone: how you pack the folder. Everything goes loose in one folder, sitting side by side β your index.html and your video right next to each other. No folders tucked inside other folders. Picture one envelope with everything dropped in it, not envelopes stuffed inside envelopes. Rise gets lost digging through layers, so flat and simple always wins.
Your folder should look like just this, both items at the top level:
index.html
intro-video.mp4The code that connects them is short. You don't need to understand every piece β you just need to point it at your file:
HTML Code:
<div class="video-wrapper"> <video controls width="100%"> <source src="intro-video.mp4" type="video/mp4"> </video> </div>
The part that matters to a beginner is src="intro-video.mp4" β that's the name of your video file. It works because the video is sitting right next to index.html in the same folder, so the code just calls it by name. If you rename your video, you change that one spot to match. Everything else (video-wrapper) is the frame, and the styling for it lives further up in the file.
Zipping it β this is where people slip. You don't zip the folder. You zip what's inside it:
- Open the folder.
- Select the files inside it (index.html and your video).
- Zip those two things.
If you right-click the folder itself and zip it, you accidentally wrap everything in one extra layer, and Rise can't find index.html. (Same "folders inside folders" trap as before.) Then upload that zip using Upload Project.
Four things that cause most "why won't it work" moments:
- Save your video as an MP4. It's the format that plays everywhere. Other formats might play fine on your computer and then break for a reviewer on a different one.
- Videos won't start on their own unless they're silent. Browsers block auto-play with sound. The easy path: don't auto-play at all just let the learner press the play button.
- Shrink your video before you zip it. The video gets packed inside your course, so a giant file makes your whole course giant and slow to load. Compress it first.
- If you ever add your own custom buttons later, there's a specific way to hook them up so Rise doesn't strip them out β but ignore that for now. When you're starting out, the built-in play button (that's the controls word in the code) is all you need.
I've included two things to get you started- An example file β a ready-made wrapper you can open, drop your own video into, and zip up. Use it as your template instead of starting from a blank page.
- This cheat sheet β keep it open (or printed) beside you while you work.
- TamelaCricke76524 days agoCommunity Member
I'm very interested in learning how you built the custom wrapper and what you did to incorporate it with the AI avatar. I use HeyGen for my custom avatar animations, but have never tried Articulate's option. I thought it was just the usual stock options which are limiting. Thanks for showcasing this so I can see what's possible!
