# How to make embedded video with circuit playground

**URL:** <https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985>\
**Category:** Website and Tools How-To\
**Created:** [April 14, 2023, 3:32pm UTC](https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985 "2023-04-14T15:32:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lalamillo](https://avatars.discourse-cdn.com/v4/letter/l/e36b37/32.png) [@lalamillo](https://forum.code.org/u/lalamillo)\
**Post date:** [April 14, 2023, 3:32pm UTC](https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985/1 "2023-04-14T15:32:23Z")

</div>

In the teacher guide they have a video of a sample student and it has the screen recording and the circuit playground. How would I create this type of video?  
Example: [Lights and Music - YouTube](https://www.youtube.com/watch?v=j9h9fJL31eg)

---

<div class="post-metadata">

**Author:** ![melynn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/melynn/32/4925_2.png) [@melynn](https://forum.code.org/u/melynn)\
**Post date:** [April 14, 2023, 3:55pm UTC](https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985/2 "2023-04-14T15:55:59Z")

</div>

Hi @lalamillo,

Yes - that is a cool video. It is helpful to show the app input and the circuit board output. I use [Screencastify](https://www.screencastify.com/) Chrome extension AND [Loom](https://www.loom.com/). Both have the options to record your screen as well as an embedded webcam. To achieve the look in the video, you would point the embedded webcam at the circuit board while recording your screen interaction with the app.

Both screen recording apps have free options but I would explore the limitations of each of those pricing options (free) to make sure they meet your needs.

I am sure there are other screen recorders that have these features - these are just the ones I use. Others may reply with other suggestions and/or tools.

Good luck!  
~Michelle

---

<div class="post-metadata">

**Author:** ![Dan](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/dan/32/5979_2.png) [@Dan](https://forum.code.org/u/Dan)\
**Post date:** [April 15, 2023, 4:18pm UTC](https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985/3 "2023-04-15T16:18:01Z")

</div>

Hi @lalamillo - I made that video. Happy to share how I made it happen =)

I used Loom (like @melynn suggested). Loom lets you record your screen and provides the little circular “talking head” widget that records your webcam. You can move the “talking head” anywhere on the screen, which is how I moved it there.

To get the circuit playground to appear in that frame, I kinda had to hack it together. I have an external webcam, and I positioned it so it was above the circuit playground, which I had taped to my desk. I took inspiration from DIY “document cameras” that I saw during the pandemic (like this one)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/e/e3daab792757ee7a38553aa3f3038bd4e63a32b0.jpeg)

My setup was basically the same, but with a webcam instead of an iPad. That distinction is important because I needed the screen **and** the physical interactions, so I couldn’t record them separately - I needed Loom for the screen + webcam, then an external webcam setup like this to look down at the circuit playground.

Definitely tricky to keep this structure going for a long time, but it was great for making these images and the animated gifs that show in some levels.

Hope that helps!  
Dan - [Code.org](http://Code.org) Curriculum Writer

---

<div class="post-metadata">

**Author:** ![lalamillo](https://avatars.discourse-cdn.com/v4/letter/l/e36b37/32.png) [@lalamillo](https://forum.code.org/u/lalamillo)\
**Post date:** [April 17, 2023, 3:43pm UTC](https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985/4 "2023-04-17T15:43:37Z")

</div>

Thank you! I tried to use Loom and choose “screen and camera” for video settings. While I am recording I can see my screen and the circle of my camera. But they are on two different windows and when I look at my recording I only see my computer screen and not the circle of my webcam. How do I get them together?

---

<div class="post-metadata">

**Author:** ![melynn](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/melynn/32/4925_2.png) [@melynn](https://forum.code.org/u/melynn)\
**Post date:** [April 17, 2023, 10:19pm UTC](https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985/5 "2023-04-17T22:19:49Z")

</div>

@lalamillo -

I could not get Loom to embed the circle webcam in Maker App either. It appeared easily in the browser but disappears when I move to Maker App. I think I tried all the options. I did get Screencastify to embed the webcam in Maker App.

It was super cool @Dan shared his tips and tricks. Maybe he can give some insight on embedding the webcam with Loom in Maker App.

Good luck!  
~Michelle

---

<div class="post-metadata">

**Author:** ![Dan](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/dan/32/5979_2.png) [@Dan](https://forum.code.org/u/Dan)\
**Post date:** [April 17, 2023, 10:31pm UTC](https://forum.code.org/t/how-to-make-embedded-video-with-circuit-playground/37985/6 "2023-04-17T22:31:30Z")

</div>

@melynn @lalamillo Oh! I wonder if it’s because I was using the Loom Desktop App - [Download the Loom Desktop App | Loom](https://www.loom.com/download). That app lets you set a specific window of your screen to record, rather than just the browser window. Maybe try that?
