Fetch confusion

Hello all.
How do I dynamically fetch media that is attached to an item? I have called my list of items with a shortcode. I have successfully added two buttons below each item that brings up a modal when clicked. In one modal, I just want to show the Item page information. That ones not too hard. The other modal I want to have two columns: the left column shows the item’s Youtube video and the right column showing the transcript that goes along with it.

Currently, I only have 5 items, so it would be easy to just add the specifics. But this project should be growing, so I want it to fill in dynamically. I know I can find the media in the /api/media. I know that the media that I’m trying to target has both an “o:ingester” and “o:renderer” of “youtube”. I know that the original item id is referenced in “o:item”:{“@id”:…, “o:id”:…}. And I know that the src for my