This week, in conjunction with our H. Lee Waters Film Collection unveiling, we rolled out a handy new Embed feature for digital collections items. The idea is to make it as easy as possible for someone to share their discoveries from our collections, with proper attribution, on other websites or blogs.
How To
It’s simple, really, and mimics the experience you’re likely to encounter getting embed code from other popular sites with videos, images, and the like. We modeled our approach loosely on the Internet Archive‘s video embed service (e.g., visit this video and click the Share icon, but only if you are unafraid of clowns).
Click the “Embed” link under an item from Duke Digital Collections, and copy the snippet of code that pops up. Paste it in your website, and you’re done!
Examples
I’ll paste a few examples below using different kinds of items. The embed code is short and nearly identical for all of these:
A Single Image
Paginated Item
A Video
Single-Track Audio
Multi-Track Audio
Document with Document Viewer
Technical Considerations
Building this feature required a little bit of math, some trial & error, and a few tricks. The steps were to:
- Set up a service to return customized item pages at the path http://library.duke.edu/digitalcollections/embed/<itemid>/
- Use CSS & JS to make the media as fluid as possible to fill whatever space it ends up in
- Use a fixed height and overflow: auto on the attribution box so longer content will scroll
- Use link rel=”canonical” to ensure the item’s embed page is associated with the real item page (especially to improve links / ranking signals for search engines).
- Present the user a copyable HTML <iframe> element in the regular item page that has the correct height & width attributes to accommodate the item(s) to be embedded
This last point is where the math comes in. Take a single image item, for example. With a landscape-orientation image we need to give the user a different <iframe> height to copy than we would for a portrait. It gets even more complicated when we have to account for multiple tracks of audio or video, or combinations of the two.
Coming Soon
We’ll refine this feature a bit in the coming weeks, and work out any embed-bugs we discover. We’ll also be developing a similar feature for embedding digitized content found in our archival collection guides.