Tumblr Themes: Fluid Width Video

Tumblr Themes: Fluid Width Video

Expand YouTube, Vimeo, and other embedded videos to 100% on Tumblr.

If you want to expand your YouTube, Vimeo, and other embedded videos out of the 500-pixel wide Tumblr standard and make them scale fluidly, this post is for you.

These instructions assume you’re familiar with CSS and customizing Tumblr themes.

Here’s the problem. When you use the {Video-500} variable, your video will come with fixed width and height attributes. Unlike images, you can’t resolve this problem with a simple max-width: 100%; declaration because the height won’t resize proportionally.

You’ll end up with a really wide, short video. This solution will always present your video with a 4:3 ratio, even as the containing element is resized.

In your HTML

When setting up your {block:Video} block, make sure your {Video-500} variable is in a container <div> with a class name. I’m going to use media, like this:

<div class="media">{Video-500}</div>

In your CSS

Add the following rules to your stylesheet. (If you used a different class name for your video container, replace media with that.)

.media {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden; 

.media iframe, 
.media object, 
.media embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

Note that padding-bottom: 75%; results in a video height that is 75% of the video width—in other words, the video is displayed with a 4:3 ratio. Feel free to adjust this number if you’re posting video in another aspect ratio.

That’s it! Follow me on Tumblr here.

Allison House is a designer and art director specializing in 3D visuals and motion graphics. Her work has appeared in the New York Times, Wall Street Journal, TIME, SPIN, Pitchfork, and many more.