Embedding 101

em·bed /əmˈbed/: Incorporate (a text or code) within the body of a file or document.

101

Nearly everyone has used a video sharing website like YouTube. It's a cool way to find video content on your own, but without embedding the only way to share that content with others would be to just send them a link: Muut tour

This might work great for 1-to-1 messaging like email, texting, and messaging — but on a website, this technique feels less constructive. Imagine posting a youtube video on facebook, or your brand's website and forcing users to leave in order to view it. Sharing our Muut tour with a link revokes our control. We simply don't want users to leave!

The solution? Embedding!

Embedding places the content directly on our page, eliminating the need to leave via link.

Two Methods

Embedding, in it's truest form makes the content a true part of your page. It is modified by your styling, and all other access rules. However, in recent years, the iFrame has become synonymous with the idea of embedding, despite it's nature.

Let's take a closer look:

True Embed

True embedding is pretty simple. The content becomes a part of the website. While, on the surface, it may appear similar — truly embedded content is yours to control, manipulate and style. This is the only method that actually embeds content, instead of creating a window into another server or page.

iFrame Embed

An iFrame is a subset of the <frame> HTML element. Frames, an internet legacy, are containers that display independant documents. These separate and independant containers do not contribute or control each. The late 90's brought this element, and early pages used them to create persistent navigation. These banner frames had navigation bars or logos, while the frame below loaded the next full page.

One of the last few remnants of the, now depreciated, <frame> element is the <iframe>. iFrames are used to display content not present on the server, and are self contained. Clicking on a link would contain the new content within the framed element rather than loading a new page.

The moral of the story? The iFrame mimics embedding, but, instead, contains and constrains the content. Youtube, for example uses an iframe to allow them to maintain their own control.