Where to get the YouTube component?

Plasmic Studio Questions
1

I’m embarrassed to ask this question, but where can I get the YouTube component? Is there a library somewhere?

I found the tutorial with the component already included but I need to import it into my existing project.

2

It’s not built into the studio at the moment :pensive:

You can set it up as a custom code component; do you already have custom app hosting set up? https://docs.plasmic.app/learn/code-components/

3

Thanks for the assist in the right direction. I’ve created my plasmic-init.ts and included my ID and API token. I’ve also added react-youtube with yarn add react-youtube . Then I added import YouTube from "react-youtube"; to the header of plasmic-init.ts.

4

But beyond that, it’s not clear to me how to make the component visible to the builder.

5

Ah great! Actually we have a helper to help you register the react-youtube component. You can do this:

yarn add @plasmicpkgs/react-youtube

Then, in your plasmic-init.ts,

import {registerYouTube} from "@plasmicpkgs/react-youtube";

export const PLASMIC = initPlasmicLoader(...);
registerYouTube(PLASMIC);
6

OK, much better progress. At this point, I’ve:

  1. Installed the module: yarn add @plasmicpkgs/react-youtube
  2. Added these to plasmic-init.ts: import {registerYouTube} from "@plasmicpkgs/react-youtube"; registerYouTube(PLASMIC);
  3. Pushed to my github repo
    I’m hoping to see the youtube component show up in my components area (near Buttons etc.) but I’m guessing there are a few steps I’m missing.
7

I promise to writeup a gist for this if I get it working. I understand that your time is valuable.

8

ah hmm, have you done this part yet? https://docs.plasmic.app/learn/app-hosting/#add-a-host-route

9

(oof we really gotta improve these docs :sweat_smile: )

10

:slightly_smiling_face:

11

ok, it look like I’m close now, but there does seem to be an issue with the fact that localhost is served over non-ssl while the plasmic UI is ssl.

12

Screen Shot 2021-12-21 at 9.24.58 PM.png
Screen Shot 2021-12-21 at 9.24.58 PM.png859×232 32.1 KB

13

Even closer now. Looks like it was important to remove the http:// prepended on the input field.

Screen Shot 2021-12-21 at 9.28.59 PM.png

14

Still no component called react-youtube in my component list or the Interactive Components

15

Oh, wow! It showed up in code components…yeah!!!

16

Next question. There appear to be props that I cannot disable: “Related Videos” for example. Is there anything I can do to override this behavior?

17

Screen Shot 2021-12-21 at 10.01.42 PM.png
Screen Shot 2021-12-21 at 10.01.42 PM.png305×560 29 KB

18

Bill, in the index.tsx of the react-youtube package you would want to comment/remove the following code that creates the Related Videos prop: (Starts at line 173)

rel: {
      type: "boolean",
      displayName: "Related Videos",
      description:
        "Whether it should show related videos when the video ends (if false, it shows other videos from the same channel)",
      defaultValueHint: true,
    },