Remember the internet in the 1990s? Much of it looked like the sight pictured on the right below.
There are many terrible things going on here. But one offense that might not be readily apparent to an average viewer?
Frames are a big reason the 90’s web looked, well, like the 90’s web. This HTML element makes it possible to split a screen into different “pages,” and display different content within each page. Frame-based layouts helped reduce load times for internet users on slow dial-up modems (i.e., everyone). Static elements (like the navigation and header) could be separated into their own frames, and therefore didn’t have to be reloaded every time the user browsed to new content in another frame.
But websites with frame-based layouts often boasted exceedingly unpleasant and confusing user experiences. Mercifully, as internet speeds have increased, their use has decreased exponentially.
But frames have left their legacy on modern web design in at least one way: in the form of iframes, or inline frames. The iframe HTML tag derives from the frame, and makes it possible to “float” one HTML document (e.g., a webpage) inside another. This capability is particularly useful for embedding video. When you use an iframe to embed video, you’re basically just putting a whole new page onto your existing page. But by getting rid of everything except the video (removing any scrollbars or background images or borders), it looks to the end user like the video is just an organic part of your page. Wistia describes iframes as a “cut-out box on a piece of paper. If you cut a rectangle into one page and place another page behind it, it will look like all the content is right there in the main page.”
iframes and Video
So, the iframe tag makes it possible to put videos from another site (e.g., YouTube or Vimeo), onto your own website. The original site (YouTube, in this example) maintains ownership over the video, and you’ll see the familiar YouTube video player on your site. Also remember that if the video is removed from YouTube for some reason, it won’t play on your website. Lastly, you can still use YouTube Analytics to see how many people viewed your video both on YouTube as well as on sites in which it is embedded.
Using iframes wasn’t always a popular method for embedding video. Up until a few years ago, most video hosting sites offered Flash-based embed codes. But then more and more people began using mobile devices, many of which don’t support Flash. This posed a big problem. The last thing a website owner wants is for an interested person to click to watch their video—only to find it broken.
The iframe embed code presented a much-needed solution to this problem. YouTube and other video hosts now offer the iframe as their default embed code. This helps prevent broken video content on mobile by allowing viewers to view the video in either a Flash or HTML5 player (if Flash isn’t supported, the player will usually use HMTL5).
iframes and SEO
Embedding videos through iframes is a great option because they work for viewers using a variety of devices and platforms. But when it comes to SEO, things get a little tricky. Again, iframes are essentially webpages within webpages. This can be confusing for Google, which is accustomed to having a single URL correspond to a single page. The official word from Google is that they’ll try to associate content within the iframes to the master page—but they can’t guarantee anything. Audience Bloom offers a few tips for increasing the likelihood that Google will take your iframes into account, including indexing your frames with robot.txt (more on that here) and using Google Webmaster Tools to index your iframe URL.
So should you use iframes? When hosting on YouTube or another site that offers iframes as the default embed method, you may not have a choice. This is fine—for your purposes, iframes will probably work just fine; and this is the best approach in terms of the video itself ranking high search. The only downside here — and it’s a big one — is that the Google Search Bots may opt to link to the video on the YouTube domain (remember Google owns YouTube), instead of the url hosting the video on your site.
Premium video hosts like Wistia offer SEO-friendly embed codes to help ensure that search engines index your video content — and link it directly back to your site. Wistia also offers an “API” embed code for those who want to customize video player functionality. (Another drawback of iframes is that they don’t work well with responsive design—though there is a way to fix this with CSS.) With these self-hosting sites like Wistia, Vidyard, and Vidcaster there’s a smaller chance your videos will rank high in search (this is a function of your own site’s page rank), but a better chance the links and the link juice from other sites flow back to your site.
Other, peer-to-peer 3rd-party hosting sites like Vimeo seem to offer an anemic compromise on both sides of that equation — lower search rankings than YouTube for your video, while still cannibalizing both your links and your link juice.
iframe embed codes aren’t going anywhere in the near term. They’re the preferred code on most sites because they’re mobile-friendly and easy to integrate. And the good news is that Google is getting better at taking different sources into account within their algorithms, though one should never mistake the search giant for an objective arbiter because of its vested interest in YouTube.