Responsive Tumblr videos not working

1
votes

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?

2
javascriptiframevideotumblr

2 Answers

2
votes

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%*/
}
2
votes

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