Iframe Embedding

Other Embedding elements

Different types of embedding elements include :

<iframe> - Embeds an external web page
<embed> - Embeds an external media file
<object> - Embeds an external application

However, the most common and popular are : <iframe>, <canvas>, <video> and so on.
<embed> & <object> are deprecated due to their lack of support in modern browsers considering the security and accessibility risks from external resources.

Here, we embedded a Youtube video "Learning Web Development as an Absolute Beginner" by Coder Coder using <iframe> element. Topics discussed are :

Roles of web developers, importance of code editors, filetypes for frontend.

Tools for front-end web development such as package managers, build tools, and version control.

Front-end skills like Sass, responsive design, and JavaScript frameworks like React.

3 Main components of backend development such as server, server-side programming languages, and databases.

Video summary built using summarize.tech. Possible inaccuracies.

Here, we have a Google map location of Moomin World, a Moomin themed amusement park and the official Moomin website, using <iframe> element.

You can check about Moomin and other characters from the embedded website by Moomin Characters Oy.

Click on "Hamburger Menu" (three horizontal lines) on left to check about other Moomin characters.

OR You could just visit their webpage, which is much more comfortable! ;D

Takeaways from Embedded Design

Source : MDN Web Docs

Embed only when and where it is needed, to prevent possible attacks since it is not secure.
One of the possible attacks is Clickjacking
To prevent Clickjacking attacks, do the following :
Always use sandbox attribute.
Use HTTPS-enabled hosting with neccessary certification using Let's Encrypt.
Secure all <iframe> elements by configuring server in JS/HTTP/XML to send appropriate X-Frame-Options header.
PS : These are mostly notes for myself :)