Responsive Tumblr Videos Not Working

I'm trying to make videos on my Tumblr theme responsive. I am using fitvids.js to resize Vimeo and YouTube embeds. However, it won't work with Tumblr's native video player. The Tum

Solution 1:

No need to use fitvids.js, you can use the padding-top trick:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videoWrapperiframe{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

And then this goes in the Tumblr template:

<divclass="videoWrapper">{VideoEmbed-500}</div>

You can see it in action on this tumblog

NOTE: that 56.25% is the result of 9/16, that means that the videos are fixed at the ratio 16:9. If you plan on having square videos or any other ratio, like 4:3

1. apply a hashtag like #fourthirds

2. make sure you have {TagsAsClasses} on the .videoWrapper element

   <divclass="videoWrapper {TagsAsClasses}">{VideoEmbed-500}</div>

3. add rules like this one:

   .fourthirds {
       padding-bottom: 75%; /*video is 4:3, therefore 3/4 = 0.75 = 75%*/
   }
   

Solution 2:

Save your sanity!

I am adding this for reference and sanity. There are two key parts to making Tumblr's own videos responsive and not breaking your layout.

Tumblr Video Variable

When picking the video variable size, pick the one that is smaller than the video embeds parent. For example, if the parent is 300px wide, use the variable: {VideoEmbed-250}.

Anything larger than the parent, will play havoc with your layout and end up breaking it, visual example.

Fluid Videos

As suggested, we need to use some sort of padding-top trick to make video embeds fluid / responsive. Using a set value for padding-top is limited as the ratio of each video may differ.

Alternatively, you can use fitvids.js with the following custom selectors:

$('.video-wrapper').fitVids({ customSelector: "iframe[src*='tumblr.com'], iframe[src='about:blank']" });

References

• Tumblr Video Variables - https://www.tumblr.com/docs/en/custom_themes#video-posts
• Fluid Videos - http://webdesignerwall.com/tutorials/css-elastic-videos
• FitVids.js - https://github.com/davatron5000/FitVids.js