A Quick and Dirty Guide to Embedding Video on the Archive of Our Own

This page is out of date and only kept for archival purposes, please see the current information here.

One of the Support tickets we’re seeing more of is “How do I post my multimedia works?” It’s not yet possible to host vids, art or soundfiles on the Archive, but you can embed works hosted elsewhere, so we wanted to let you know more about how to do that.

Tags and Finding Audio-Visual Works

Right now, the best way to help people find your multimedia works is by adding the information in the Additional Tags Field. The current ‘canonical’ for audio fics (podcasts, audiobooks, and other such works) is the Tag Podfic, which has subtags for most of the file types (canonicals are the tags which show up in our browsing filters – other variants of the tag are hooked up to that so it finds them all). There is also a Podfic Available tag for authors who have audio versions of their work posted by another author or on another site. We also have a tag for Fanart, with many different subtags.

There is already a lot of video under the Fanvids tag. Some are links to the works posted off-site, but many are embedded in the Archive and can be commented, kudosed, bookmarked, and shared!

We are discussing behind the scenes how to categorize audio/visual media works as we expand this aspect in the future, and at some stage will ask for public comment, so keep an eye out for that! Until then, you can use these tags to find your favorite works in new forms, or tag your own works so others can find them!

Posting a New Multimedia Work

Right now, we don’t have on-site hosting, so you’ll have to host your file at another site such as Vimeo, YouTube, or your own website. You can always just create a link in your work so a user goes to your hosted site, but where’s the fun in that? Here’s what you need to know if you want to just press play!

Sites

The HTML Sanitizer we use runs a very tight whitelist on sites we allow to provide media code (this is necessary in order to ensure we don’t let malevolent code slip by). If it’s not posted to one of these listed sites, the Sanitizer will delete the embed code entirely.

archive.org
criticalcommons.org
dailymotion.com
google.com
metacafe.com
podfic.com
ning.com
soundcloud.com
spotify.com
vidders.net
viddertube.net
vimeo.com
youtube.com
8tracks.com

We are currently keeping the whitelist short, evaluating each host site for stability, code vulnerability, content (whether fans are using it), and the size of its user base. (If you know of a site that you think should be on this list, submit a Support ticket and we will submit it for review. This may take a little while, so you may want to use another host in the meantime.)

Some Notes about HTML Code

There are four ways to embed audio/video in HTML. Currently, we support code starting with the following three tags:

<object> – this is the older method that YouTube and Vimeo used to embed video until recently. It’s reported to be buggy on iDevices, so use with caution.
<embed> – this tag is mostly used for audio, and occasionally to simplify the mess that <object> generates. It’s a lot easier to read and compatible with more platforms, so if you have a choice between <object> and <embed>, choose the latter.
<iframe> – This is the newest style media embedding tag that we currently support and the most widely accepted for mobile media. Unlike the other tags, <iframe> functions as a separate window within your page to generate the content. This means that a user running NoScript, AdBlock, or similar may have to specifically request to see your media. By default, YouTube, Vimeo, and many other sites will try to give you <iframe>.

We do not actively support:

<audio> or <video> – These are new HTML5 tags, and while they’re great in concept, cross-browser implementation is currently spotty. One of the major problems is you need two different versions of the same file to be guaranteed to play in any browser. The Archive’s HTML Parser will remove any <audio> or <video> tags.

If you are writing your own embed code and find a property stripped out that you think should remain, let us know!

Inserting Art

Many websites that host your images will provide the code to embed the image in another site. Just remember that the code has to be posted into the HTML Editor, not the Rich Text Editor. Some sites do provide a lot of formatting in their code. The part you absolutely need to keep is the <img src="... /> portion.

If you prefer to use the Rich Text Editor, you can click on the “Insert Image” icon. You will need the actual link to the image, instead of the whole embed code. It will be something like http://www.host.com/.../image.jpg or http://www.host.com/.../image.png – It has to have the file extension at the end, though!

We currently don’t restrict image sources, but there are some tips and tricks, depending on your host site. This is a non-exhaustive list of possible file hosts:

photobucket.com: Recommended – provides direct image links, image links don’t change over time
dropbox.com: Recommended – provides direct image links, image links don’t change over time
deviantArt: Caution – dA’s native embed code is removed by the parser, but you can right-click on an image and copy the image URL for the Rich Text editor
tumblr.com: Not recommended – you can right-click to get direct image links, but image links do change over time with no warning. This breaks the image display.
drive.google.com: Not recommended – does not provide direct image links
onedrive.live.com: Not recommended – does not provide direct image links

If you find a site that isn’t working, let us know via Support!

Inserting Video

Like images, most websites that host video for you will provide you the embed code to place in a post – you can just copy and paste this code into the HTML editor of a new work, tag it and post it! (See Known Issues below)

Inserting Audio

Embedding video is fairly straightforward if you’re using the above sites. Embedding audio, on the other hand, requires passing the data through the Archive’s public audio player.

Find the direct link to your audio file. The file has to be in the MP3 format – none of the other common audio file types will work consistently.
In your work, in the HTML editor, copy and paste the following:

<embed type=”application/x-shockwave-flash” flashvars=”mp3=MP3_FILE_URL” src=”http://archiveofourown.org/system/dewplayer/dewplayer-vol.swf” width=”250″ height=”27″ allowscriptaccess=”never” allownetworking=”internal”></embed>
Replace MP3_FILE_URL with the full link to your audio file. Make sure to include the http:// from the address, or the plug-in will be very confused. Also make sure your browser hasn’t given you “smart” angled quotes. There are several other player versions available at our post announcing the new player software.
Once you post the work, make sure to press play to verify all the servers can find each other.

Known Issues

Pasting with quote marks: Several of the major browsers are converting regular quote marks to angled smart quotes when pasting in code. These smart quotes will be stripped out by the parser, rendering the code unusable and causing the entire embed to be stripped out. You’ll need to manually go through the pasted code and replace the “smart” angled quotes with straight double quotes.

The Future

In the future, we would like to provide on-site hosting of multimedia (it’s likely that fanart will be the first media type we are able to support).