Archive of Our Own ^beta

To embed videos we need to use an <iframe> tag. If you click “share” and then “embed” on youtube, you will find the code needed. You can copy the whole code, but ao3 will remove “allow”, and we add a “class”, leaving a code that looks like this:

<iframe class="mobilevideo" src="https://www.youtube.com/embed/AdfIfFGCqgo" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>

This line of code is the same for all videos, so in the future when you use it you can just switch out the embed-link to the video you want.

The width and height of 560x315 gives us the aspect ratio of 16:9 that we want to keep even when the video scales to fit the screen. While you with an image could simply use a width: 100%; in the css, it’s not that simple here. First, we’ll begin by placing a div around the iframe and give that a class that will scale the video.

#workskin .videocontainer {
max-width: 100%;
width: 560px;
}

It’s important that you only specify a width (it can be changed depending on how big you want the video to go on wider screens) and no height. The height will be fixed later.

The div for this will be placed around the iframe, and we’ll go ahead and place one more div inside it. Ao3 will most likely place empty paragraph tags between the two opening div tags (like this: <p> </p>) but you don’t have to worry about those, the code will still work (it will however make space between the video and whatever text or other thing you have before it).

<div class="videocontainer"><div class="videoscale">
<p>
      <iframe class="mobilevideo" src="https://www.youtube.com/embed/AdfIfFGCqgo" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
    </p></div></div>

The second div we added will be styled like this:

#workskin .videoscale {
position: relative;
height: 0;
padding-top: 56.25%;
}

The height as 0 in combination with the padding will mean that the height of this element will be 56.25% of it’s parent element — that is set to scale — which gives the aspect ratio of 16:9. On wider screens the video will be the specified 560x315 pixels, but on screens smaller than that, it will be smaller. So, if you want the video to be bigger than that, specify other pixels in the iframe tag (and in the css for the container), but make sure that it keeps the aspect ratio of 16:9.

Lastly we’ll style the class for the <iframe> tag we added in the beginning.

#workskin .mobilevideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

These will make sure that the video takes up the whole of the box containing it, so that it’s actually scaled correctly.

The code we end up with looks like this:

The css:

#workskin .mobilevideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#workskin .videoscale {
position: relative;
height: 0;
padding-top: 56.25%;
}

#workskin .videocontainer {
max-width: 100%;
width: 560px;
}

The html:

<p></p><div class="videocontainer">
<p></p><div class="videoscale">
<p>
      <iframe class="mobilevideo" src="https://www.youtube.com/embed/AdfIfFGCqgo" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
    </p></div></div>

Live example:

Without the styling:

They'll be the same on wider screens, but on smaller screens the styled video will scale to fit, while the non-styled video will force a side scroll.

Some notes:

You can of course name the classes something different, but remember to keep it consistent everywhere.

When using this code again, you can just copy paste the code, and switch the last bit of the link (after /embed/) to the part of the regular link found after “watch?v=”.

For beginners at ao3 work skin and formatting: the html goes in the work, the css goes in the work skin - see this tutorial for more info (or just leave a comment/question below).