How To Make Tumblr Blog Fit Screen

How To Resize Videos On Your Tumblr Posts?

Videos on your posts looking way too big? Here's a tutorial on how you can resize the videos on your Tumblr posts.

Depending on the theme that you're using, videos that you add to your posts might span the entire width of the post box. Some of these themes, like Rustelia, Mystic Summer and Weiss Zima, are also responsive, which means that, even if you resize the screen or even if you're on a smaller or mobile device, you'll still be able to see the entirety of your video.

As such, keep in mind that, for some themes, changing the width and height of your videos might no longer make them responsive. Okay, let's get started. First, let's get a video. Here's one from YouTube:

The original size looks pretty big, huh?

original size of a youtube video added to a tumblr text post

Now, how can we resize this video? You can choose between two different methods or ways in order to resize your video.

1. Change the width and height of the iframe

The first method will require you to go to the HTML editor of your post. You'll see something like this:

Look for the following codes:

<figure class="tmblr-embed tmblr-full" data-provider="youtube" data-orig-width="540" data-orig-height="304" data-url="https%3A%2F%2Fyoutu.be%2Fby-LBeuVeWI"><iframe width="540" height="304" src="https://www.youtube.com/embed/by-LBeuVeWI?feature=oembed" frameborder="0"></iframe></figure>

These codes refer to the video that you just added to your post. Focus your attention on this part of the codes:

<iframe width="540" height="304"

Change the width and height to your liking. For example, I will change the width to 400 and the height to 200. We'll now see something like this:

youtube video added to a text post with iframe width and height resized

As you can see, changing the height and width of the iframe will cause the video to become smaller, cutting off part of the vid so you can't fully see it. If you don't want this to happen, then check out the second method of resizing your vids instead.

2. Enclosing the video in a div with your own specified width and height

This method will also require you to go to the HTML editor of your post. Again, find the figure and iframe codes that refer to your video. After that, add the following codes:

<div style="width:340px; height=200px;"></div>

So that the entire code should look something like this:

          <div style="width:340px; height=200px;">          <figure class="tmblr-embed tmblr-full" data-provider="youtube" data-orig-width="540" data-orig-height="304" data-url="https%3A%2F%2Fyoutu.be%2Fby-LBeuVeWI"><iframe width="540" height="304" src="https://www.youtube.com/embed/by-LBeuVeWI?feature=oembed" frameborder="0"></iframe></figure>          </div>

The bolded parts are the codes that we just added. You can set your own width and height. With this method and with the above specifications for the width and height, our video will now look like this: