<iframe> The Inline Frame
The <iframe/> HTML element represents a nested browsing context, embedding another HTML page into the current one. (src : Mozilla)
Syntax:<iframe id="someId"
title="Has To Have A Title"
width="300"
height="200"
src="url of the link you want to embed">
</iframe>
<iframe> helps with embedding any youtube videos , maps or more , even a google calendar to your project, yes you read it right, you can embed google Calendar to your web app using <iframe/>
For my project i worked with a random meal generating API that also happened to have URL for youtube videos.
I felt like, what a perfect way to look at a recipe by watching a Youtube video on how to make a meal. So i decided to use <iframe/>
In next steps, i will show how i embedded random youtube videos to my project using <iframe/>.
If you are in a situation like me where you are using user input to change the src of <iframe/> and you want a different URL for your source every time your page renders, then you may come across an issue with youtube videos urls, Youtube URLs can have watch in them as shown below but in order for the link to work with <iframe/> it has to have embed instead of watch. If it is a single URL you can just change that yourself
”https://www.youtube.com/watch?v=1234567890"we need”https://www.youtube.com/embed/1234567890"
Example shown below, shows steps on how i fixed that issue in my project, i mapped over my array of recipes and got my youtube url then worked on following steps to break my url and then replace watch with embed
step 1:
get the Urlstep 2:
const url = showRecipe.map(x => x.strYoutube.split("/"))
//console.log(url)step 3:
const cutFirst = url.flat().splice(0, 3)
//console.log(cutFirst)step 4:
const first = cutFirst.join("/")
//console.log(first)step 5:
const cutLast = url.flat().splice(3, 4).toString()
//console.log(cutLast)step 6:
const last = cutLast.slice(8, 19)
//console.log(last)step 7:
const newUrl = first + "/" + "embed" + "/" + last
//console.log(newUrl)
and results in console for each step
if there is any other way around it that’s fine too, this is what i had to come up with to use my random meal generating api videos
after i was able to get my newURL this is how i embedded it using <iframe/>
<iframe
className="responsive-iframe"
src={fullUrl}
frameBorder="0"
allowFullScreen
title="Random Recipe"/>This way every time my page refreshed my new random video generated with that newUrl
<iframe/> element provides as a great resource and really helpful when you want to use these already existing sites to make your website more powerful.
i also added a Google calendar to my site using the already existing <iframe> code that exists in the settings of Google calendar
Iframe is one of the oldest HTML elements, and its resilience and usefulness tell us it’s here to stay for a while. For embedding content, this element is a must for your HTML tool belt.
