# Show video in each element with a specific css class

**URL:** <https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702>\
**Category:** Coding Questions\
**Created:** [March 21, 2021, 9:08pm UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702 "2021-03-21T21:08:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hilkeros](https://avatars.discourse-cdn.com/v4/letter/h/f17d59/32.png) [@hilkeros](https://discourse.processing.org/u/hilkeros)\
**Post date:** [March 21, 2021, 9:08pm UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702/1 "2021-03-21T21:08:01Z")

</div>

I am looking for a way to show the same video in each div with a specific class and looked at different approaches, but I didn’t find a solution. It is not possible to pass a p5.Image as the content of a createDiv function, for instance.

Currently I have this, which makes a couple of divs with the class ‘.post’;

```auto
let posts = [
    `Why lose time on hating her. She knows that we're losing time`,
    `Why lose time on blaming her. You know she won't give a damn`,
    `I think you have bigger problems. You'd better tell me about those`,
    `Don't you think there is no tomorrow for the bloody things that you chose`
];
let myVideo;

function setup() {
    canvas = createCanvas(400, 300);
    posts.map(post => { return createDiv(post).parent('#posts').class('post') } );
    myVideo = createCapture(VIDEO);
    myVideo.size = (80, 60);
    myVideo.hide();   
}

```

I want to insert the video capture after the text in each div with the class ‘.post’. Any tips for a good approach?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 21, 2021, 10:51pm UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702/2 "2021-03-21T22:51:23Z")

</div>

I’d suggest setting the video’s parent to the div you like, and don’t `hide` the video.  
[https://p5js.org/reference/#/p5.Element/parent](https://p5js.org/reference/#/p5.Element/parent)

For multiplying them I’m not sure - can you simply `createCapture` multiple times?

---

<div class="post-metadata">

**Author:** ![hilkeros](https://avatars.discourse-cdn.com/v4/letter/h/f17d59/32.png) [@hilkeros](https://discourse.processing.org/u/hilkeros)\
**Post date:** [March 27, 2021, 10:53am UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702/3 "2021-03-27T10:53:29Z")

</div>

I think you have to hide the video. Otherwise it will show up at the end of the DOM.

With `parent` you can add a video to only one DOM element. Actually, what I want in the end is one video file playing multiple times on the screen synchronously. In that sense, using `createCapture` or `createVideo` multiple times is not really a good solution. It is easy to show the same video multiple times on the canvas by by doing something like

```auto
function setup() {
    canvas = createCanvas(400, 300);
    myVideo = createCapture(VIDEO);
    myVideo.size = (80, 60);
    myVideo.hide();  
}

function draw() {
    image(myVideo, 0, 0);
    image(myVideo, 200, 200);

}

```

However, I don’t find a way to draw the different instances of an image into a specific div. You can’t call `parent()` on `image()`. I also thought about using `createGraphics`, but again you will need to call `image()` to show something and you can’t bind that to multiple divs.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 27, 2021, 11:16am UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702/4 "2021-03-27T11:16:10Z")

</div>

> [@hilkeros](#):
>
> I think you have to hide the video.

yes and no, depends on how you want to do it.

After all, what you draw with p5.js sketch ends up on a `canvas` element. `canvas` is just a DOM element and you cannot multiply the canvas within a sketch. If you want several canvases, you should check out [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode). With that direction, you need to hide the video element and display the video using `image` on every canvas. You can attach this `canvas` to another `div` using `parent`.

However what I was suggesting is to open several videos as DOM elements. When `createCapture` or `createVideo`, it returns a DOM element (wrapped by p5, to be precise). They are independent of the canvas. You can attach them to another `div` by using `parent` function. This way, you can attach the element freely on the html page, but of course if you `hide` them, they will not appear on the page.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [March 27, 2021, 12:28pm UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702/5 "2021-03-27T12:28:51Z")

</div>

this is the idea I suggested using video dom:  
[https://editor.p5js.org/micuat/sketches/T5TS7T2fW](https://editor.p5js.org/micuat/sketches/T5TS7T2fW)

Instead, if you want separate `canvas` for each `div`, check out the instance mode I mentioned above and you can programmatically instantiate multiple sketches.

---

<div class="post-metadata">

**Author:** ![hilkeros](https://avatars.discourse-cdn.com/v4/letter/h/f17d59/32.png) [@hilkeros](https://discourse.processing.org/u/hilkeros)\
**Post date:** [March 27, 2021, 1:40pm UTC](https://discourse.processing.org/t/show-video-in-each-element-with-a-specific-css-class/28702/6 "2021-03-27T13:40:24Z")

</div>

Thank you very much. I definitely misunderstood some things. This brings me much closer to my idea.