Responsive Tumblr videos not working

Question

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 Tumblr native video player uploads an iframe at a fixed width — I can change this, but then the formatting of the controls are very wonky (they must depend on the fixed height or width).

Also, the iframe src is hidden (about:blank), and Tumblr must do something custom to replace it:

<iframe width="500" height="281" src="about:blank" id="tumblr_video_iframe_87978936100" class="tumblr_video_iframe has_lightbox" data-origin="ckone-dev.tumblr.com" data-width="500" data-height="281" frameborder="0" scrolling="no" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" seamless="" style="display:block;background-color:transparent;overflow:hidden;">
</iframe>

Is there a solution to access an API for this video player, or at least change some of the contents of the iframe?

Answer 1

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

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

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

And then this goes in the Tumblr template:

<div class="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

   <div class="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%*/
   }