Understanding Embed Codes

You have probably encountered embed codes before, but they may seem like a bit of a mystery.

An embed code is, in short, a bit of HTML that allows you to embed part of another web site on your own – like a YouTube video, for example.

Embed codes come in two general flavors these days, and each has its strengths and weaknesses.

So, how do embed codes work? Why are some hugemongous, and others teeny-tiny? Are iframe tags really the spawn of the devil?

Read on!

iframe Embed Codes

The most well-known type of embed code is the iframe embed. A YouTube video embed code looks like so:

<iframe width="560" height="315" src="https://www.youtube.com/embed/rCnN-HOiA8w" frameborder="0" allowfullscreen></iframe>

Much has been said about iframes, and they have been the topic of heated debate.

You can simply think of an iframe as a picture frame that you hang on your wall. In this case, your wall is your web site, and the picture frame is the iframe code.

That’s all an iframe is. It’s a box on your site, with a src attribute that specifies a URL. In the YouTube example above, we see that the source URL is:

https://www.youtube.com/embed/rCnN-HOiA8w

Note that this is different than the URL if you were viewing this video on YouTube itself. To view the above YouTube vid in your browser, you’d normally go to:

https://www.youtube.com/watch?v=rCnN-HOiA8w

You can load the “embed” URL in your browser if you’d like. You’ll simply get a full-screen version of the video. In fact, that’s where the iframe’s other HTML attributes come in.

The width attribute says you want the picture frame on your web site to be 560 pixels wide, and the height attribute says the frame should be 315 pixels tall. The frameborder=”0″ part means don’t display the pictures with a frame (em, border), and allowfullscreen tells you browser that it’s okay to allow the picture frame to temporarily maximize the video embed when you click the “Full Screen” button on the YouTube video.

The result is an embedded video, like so:

That’s it. Pretty simple, eh?

You can use iframes with any URL you’d like. For example, you could embed the homepage of my site in an iframe on your web site, like so:

<iframe width="560" height="315" src="http://scottiestech.info" frameborder="0" allowfullscreen></iframe>

In other words, iframes aren’t magical. They’re just a way to include a link to some other content, and have that content show up in a frame on your site.

iframes are Evil?

It may seem dangerous to take someone else’s web site (or part of it) and plop it inside your own, but it isn’t supposed to be… I say that because according to the specs, iframes are supposed to be isolated from their parent page. Put another way, if you embed my site on your blog in an iframe, the reader’s browser should treat the content of the iframe (my site) as a totally different window or tab – just as if you’d loaded the 2 URLs in different tabs yourself.

That’s how it’s supposed to work.

Unfortunately, that’s not how it works in practice. There is nothing inherently wrong with the idea of an iframe, but they are only as safe as the people who program our browsers make them.

But generally speaking, nowadays you shouldn’t have many fears about iframes.

iframes are, like, so Yesterday!

No, they aren’t. If iframes were “yesterday’s technology”, then YouTube certainly wouldn’t be using them. But, guess what? They are using iframes! That’s because they’re smart.

You see, there are other types of embed codes, but they suffer from several problems…

Twitter-like embed codes

Oh, Twitter… Will you ever get it right? Probably not. I can dream, though.

Let’s see what your typical twitter embed looks like (one of the variants, anyway – with extra line breaks for readability, and an accented “i” in the script tags for display purposes):

<blockquote class="twitter­­˗tweet" lang="en">
<p lang="en" dir="ltr">
The Health and Wellness Show - 25 May 2015 - Detox Prot... on SOTT Radio Network will air 05/25. 
<a href="http://t.co/LV2mEFeGvn">http://t.co/LV2mEFeGvn</a> 
<a href="https://twitter.com/hashtag/BlogTalkRadio?src=hash">#BlogTalkRadio</a>
</p> &mdash; Signs Of The Times (@SOTTnet) 
<a href="https://twitter.com/SOTTnet/status/602882824497135616">May 25, 2015</a>
</blockquote>
<scrípt async src="//platform.twitter.com/widgets.js" charset="utf-8"></scrípt>

You exclaim, “What in the name of Holy God is THAT?!”

That, my friends, is an epicly stupid embed code. 🙂

It works like this: The embed code is actually basic HTML, which of course you can style a bit with CSS on your own site if you wish. This way, even before the embedded tweet is fully loaded, it’s still functional: there is text, links, etc.

After the HTML, there is a JavaScript include:

<scrípt async src="//platform.twitter.com/widgets.js" charset="utf-8"></scrípt>

This include asynchronously loads //platform.twitter.com/widgets.js, which is Twitter’s embed code transformifier. The JS loads, finds all the embedded tweet HTML on the page, and magically transforms it into full-blown Tweets, just like you’d see on Twitter itself:

So, it works. Obviously, there are a few benefits, like the fact that even if JS is disabled or the JS doesn’t load, a basic-yet-ugly chunk of HTML that contains the tweet info is still present on your page. However, there are also several drawbacks:

1. The embedded HTML code (before the Twitter JS runs) is now included statically on your web site. What happens if it changes? Too bad for you!

2. The inclusion of script tags that load JS directly from Twitter is kind of a no-no. Any JS you load like that on your site has access to everything else on the page, including other JS code, the DOM, everything… So, if you’re going to use JS-based embed codes like this on your site, you better be darn sure you can trust the site you’re getting them from! Recall that with in iframe, the remote embed content is more or less isolated from your page, since it’s just a picture hanging on the wall. The picture can’t modify the wall. With Twitter-like embed codes, the picture can do anything it wants with the wall, including painting it a different color, removing or hiding other content, etc.

3. The above Twitter embed code is frickin’ huge and complicated – unnecessarily so… and that’s a short Twitter embed. Some of them are 3 times longer. That’s just nuts, and totally inefficient.

4. Following on #3, think about the YouTube iframe embed. It’s just a URL with a video ID number. What if YouTube wants to totally change the embedded video content, or the look and feel? No problem! Since the iframe is simply loading a URL pointing to their site, they just change their site. Bam, done. Your embedded video “updates itself”.

Now, what if Twitter wants to change how a Tweet looks? Well, they can certainly change whatever they want via the loaded JavaScript code, but they can’t change the accompanying static HTML that you’ve already plopped on your page. That means that either the old embed codes will no longer be supported, or their JS has to become larger and more complicated since it has to deal with the Old Style HTML and the New Style HTML.

And, when you think about it, how hard would it have been for Twitter to just make a simple iframe with a URL that basically just included the above tweet embed inside an HTML page wrapper? Not hard at all… And then a Twitter embed would have been as short and simple as a YouTube embed, easily and 100% modifiable by Twitter, and the world would have been much happier.

5. Block-level tags like DIV and BLOCKQUOTE are treated differently by browsers than are iframes. This can cause certain headaches – for example with styling, layout, and rendering.

6. Related to #5, if you’ve ever written your own WYSIWYG editor for a web site, you know that dealing with Twitter-like embed codes is a nightmare – at least in comparison to dealing with YouTube-like iframe embeds.

Other embed codes

The Twitter-like embed code is very, very popular. Instagram does the same thing, along with many smaller video-sharing sites. Personally, I try to avoid embeds from such sites like the plague. I’m not going to put some other site’s JavaScript on my web site, because I can’t guarantee that it’s not going to do something totally evil. It actually boggles my mind that this style of embed code has become increasingly popular.

True, iframes are not totally 100% secure, but then that’s something we need to take up with the people who program our browsers. In any case, iframes are a far cry above the security of including somebody else’s raw JavaScript on your page.

Also, there are older style Flash-based embed codes. For example, an old-style YouTube embed code:

<object width="560" height="315">
<param value="http://www.youtube.com/v/rCnN-HOiA8w&showsearch=0&rel=0&fs=1&autoplay=0&amp;ap=%2526fmt%3D18" name="movie" />
<param value="window" name="wmode" />
<param value="true" name="allowFullScreen" />
<embed width="560" height="315" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/rCnN-HOiA8w&showsearch=0&fs=1&rel=0&autoplay=0&amp;ap=%2526fmt%3D18"></embed>
</object>

Or simply:

<embed width="560" height="315" wmode="window" allowfullscreen="true" type="application/x-shockwave-flash" src="http://www.youtube.com/v/rCnN-HOiA8w&showsearch=0&fs=1&rel=0&autoplay=0&amp;ap=%2526fmt%3D18"></embed>

You don’t see these much any more in the wild, since the iframe technique allows YouTube (for example) to decide whether you get an HTML5 video, or a flash-based video… And all the Long Embed Code Insanity is totally hidden from you! Nice.

Wrap-up

Well, there you have it. That’s what an embed code is, and that’s how the most popular variants work.

Despite the ridiculous and often unnecessary complexity involved, hopefully you now have a better idea of exactly what’s going on with embed codes!