Uploading Audio and Video to Ao3
Host your video or audio file on one of the supported websites listed in Ao3’s FAQ and use their native embed code. Simply copy the embed code and paste it into the work text section of your Ao3 draft, tag it as you would a fic, and post! Make sure you are using the HTML input and not the Rich Text input when copy-pasting.
Mildly Complicated Method
Ao3 does not support iframes from any site not listed as a host site in their FAQ. However, that doesn’t mean you are limited to those sites. Ao3 supports both the <video> and <audio> HTML tags, which if supported by the viewer’s browser, generates an iframe for them. We say mildly complicated because it isn’t as simple as a copy-paste, but it’s not hard either.
The code you will be using is:
<video controls> <source src=“Video URL”> </video>
<audio controls> <source src=“Audio URL”> </audio>
depending on your needs. The video tag supports formats in MP4, WebM, and OGG while the audio tag supports MP3, WAV, and OGG. If your content isn’t in one of those formats, it’s not going to work.
You get your video/audio URL by uploading it to your host site of choice, right-clicking on the video/audio itself, and copying the video/audio link. You insert that in between the quotation marks.
If, for whatever reason, there isn’t an option to copy the audio or video link, opening the video or audio into a new tab will place the link in the URL of that new tab. If your host site truly hates you and doesn’t offer you that option in the right-click dropdown either (such as Tumblr with audio posts), here are the steps to do so:
Right-click on the audio/video and select Inspect
2. Click on the Network tab in the inspector. You may have to select “Reload” or refresh the page for things to appear in it. You should now have something like this at the bottom of your screen
3. Play the audio/video in question.
4. In the initiator column in the inspector, find “media”
5. Follow that row to the size column and right-click. This should bring up a menu with an option to Open in a New Tab. Click it..
6. The audio/video URL is now the URL of the new tab. Copy it and paste in between the quotation marks in your code
The code with your URL goes into the work text of your Ao3 draft just like the previous method. Make sure you are pasting into the HTML input, select your tags, and post!
If you would like to customize the size of your video player, you can add width and height designations in the beginning video tag like so:
<video width=“320” height=“240” controls>
This example should generate an iframe 320 pixels wide by 240 pixels tall.
If you want to ensure everything works before posting for either method, we suggest using the preview feature. If everything’s set up correctly, you should see an audio or video player and your content should play when you click play.