Embedded videos with react but make it easy.

For my react based project for school, I decided to go way in over my head with routing, embeds, and functionality considering I only had about 3 days to finish it... but one of the big features I wanted to include was creating a route to a page with an embedded YouTube video playing a trailer for the specific documentary that was selected on the home screen. Now how did we accomplish this?

For starters: Routing. We created our routes, and instead of placing the route to the page with all of the trailers on one page we passed the links to the trailers down through a props and tagged the route on the images with a link tag.

<Link to={/youtube/${embedId}}>
<img src={docInfo.image} alt={docInfo.comment} />
</Link>

And the rest of the routing inside of your App.js component...

return (
<>
<Header search={search} handleSearch={handleSearch} />
<Switch>
<div className="app">
<Route path='/newdocform'>
<NewDocForm addNewDoc={addNewDoc}/>
</Route>
<Route exact path="/">
<DocuContainer
natureDocs={displayedListings}
/>
</Route>
<Route path='/youtube/:embedId'>
<Trailer />
</Route>
</div>
</Switch>
</>
);

Once you have you route tagged on to the image and have built out the rest of your routing you should be able to route through your webpage by clicking your images!!

Now here comes the easiest part: embedding videos.

Embedding is was easier than you think. For one, YouTube specifically has an embed option for using their videos with all the code you need for example:

<iframe
width="560"
height="315" src="https://www.youtube.com/embed/QjVLMU9MdOY"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

The type of tag that you need to make everything function properly is an . iframes work by creating a space within your site that allows a separate document to be displayed within your webpage without needing to redirect. You can also make iframes dynamic.

For my project, we decided to dynamically render the videos within the routing so we changed our SRC from

src="https://www.youtube.com/embed/QjVLMU9MdOY"
(this link is just to the Monterey Bay Aquarium jellyfish tank)

to

src={"https://www.youtube.com/embed/${embedId}"}

The reason we did that was because when you click the image and you are routed to the page that contains your trailer, we don't want every single trailer to render and we also didn't want only one trailer to render. All together it makes the routing more dynamic and more flexible and also it allows you to pull more complex APIs and include more information in to your webpages. It can help level up your code and it also makes it easier to embed things instead of having to recode out everything to include more complex coding structures. Might as well include things the easy way!

Comments

[Andrew Baisden]

This is a great topic you can make the code more readable though if you use code blocks. Google "markdown code blocks" and don't forget to add the syntax highlighting 😊

[K Montgomery]

Thank you so much! I'll come back soon and clean it all up.