0
0

What's Yo Flava?

We get a lot of questions about what embeds to use where and when. We thought we'd help clarify what the differences are between our different embed types.

A Brief History of Embeds

We started with a dream. A dream of a terrifying Frankenstein embed that was actually more of a nightmare -- it turns out the idea of combining all of the embed types below into one freak being wasn't so plausible IRL. We then moved on to IFrames, but SEO was sort of inconsistent. In the end, it made the most sense to offer multiple embed options for different situations and priorities.

IFrame Embeds

IFrames are sometimes the subject of unwarranted flack, with the mere word "frame" sending shivers of fear down the spines of those for whom it hearkens back to the illustrious frames of 1998 that basically served as a poor man's server side include. Now that most websites are built in dynamic languages, frames are obsolete. However, that "I" makes all the difference, and IFrames are actually a super different and super useful tool that serves a completely different purpose.

The main utility of IFrames is that they can be used to serve up third party content with third party updates and control without interfering with the HTML, CSS, or Javascript of the parent page. CMSes that can strip code from embeds are no longer a problem because our code is isolated from the code of the parent page, so plug-ins can be executed even on pages where code might otherwise be garbled in some way. The third party control factor also allows for easy changes to video thumbnails, etc. without having to re-embed the video. We had to jump through some hoops to make them cross-compatible, but we don't back down in the face of a challenge.

If you're doing something basic without a ton of bells and whistles or embedding video in a third-party CMS, IFrames are the way to go.

API Embeds

Our IFrame embed is a wrapper around our API embed. The advantage to having the API embed outside of an IFrame is that you can use your own Javascript on the parent page to touch it. While IFrames are great for preventing interferences, they do have some annoying qualities (for example, the mouse event for a hover isn't detected on the parent page). API embeds allow us to do more advanced things with embeds and add hidden features for customers -- it's easy to build new things around the API embeds.

If you need to add extraordinary features to your video embeds, API embeds are for you.

SEO Embeds

SEO embeds use old object tags so they're crawlable by those creepy search engine robots that make you Internet famous. SEO is inconsistent with IFrames; Google's official stance is that they don't crawl IFrames, although sometimes things like an image still or link might sneak their way in. These also use noscript tags to make sure transcripts are visible to everyone. However, they lack the universal compatibility of IFrames.

If SEO is a priority then use SEO embeds.

Popover Embeds

The obvious benefit to popover embeds is that they free up page real estate while allowing those who want to view your video to view it at a resolution that doesn't require a magnifying glass. That aside, since they use an IFrame, they also basically share all of the other benefits of IFrame embeds.

If you don't have a lot of space for a video on your page, use popovers.

Keep Learning
Here are some related guides and posts that you might enjoy next.