Controlling tumblr embeds on your website

A brief guideline to controlling tumblr's native embeds on your own website with CSS and iframe.

I wanted to embed a friend's post onto one of my site's blog entries and realized it's a horror show. tumblr will put the equivalent of a giant embedded skyscraper on your website instead of scaling of any kind. Absolute clownery. This embed has got to be a minimum of 1200-1400 pixels vertical and, unlike Spotify, offers zero controls on size.

I wondered if there was anything I could do other than taking a screenshot, and making it clickable via link, to control an image directly. Turns out, I can trap it into a div and make it scroll and scale slightly.

Here is tumblr's native embed.

I used a few things to forcibly control it since it's a type of iframe. I made it get inside a scroll box to trap it in there.

img, video, iframe, audio {
     display: block;
     margin-inline: auto;
}
.tumblr-figure {
    max-width: 34rem;
    margin: 1.5em auto;
    text-align: center;
}
.tumblr-frame {
    width: 100%;
    max-height: 31.25rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 2px solid var(--gallery-border);
    border-radius: 0.6em;
    box-shadow: 0.2em 0.2em 0.4em rgba(0,0,0,0.25);
}
.tumblr-frame iframe {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
.tumblr-frame .tumblr-post {
    max-width: 100% !important;
}

I also changed the embedded link to show View the tumblr post because a full URL for a link is just... bad practice. What in the world is going on with tumblr devs with their embed functions?

<figure class="tumblr-figure">
  <div class="tumblr-frame">
    <div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/nXIOBBi3kzGSe2ffgtfvrQ/800391149727711232" data-did="fcefd80a02a65d07209de5958625b6dff8cc4e76"><a href="https://lespaulchen.tumblr.com/post/800391149727711232">View the tumblr post</a></div></div>
</figure><script async src="https://assets.tumblr.com/post.js"></script>

Here it is in action. Inside a nice little box. While still being embedded for interactivity than resorting to a screenshot.