Resizable boxes in pure CSS!

This morning I stumbled upon the CSS resize property. You have probably seen the default <textarea> element:

Notice you can resize me!

But you might not know that you can make any element resizable by using the CSS resize property! For example, here’s a resizable video, with a little handle in the bottom-right corner:

Here’s the CSS for that:

<div style="resize: both; overflow: hidden; width: 500px; height: 300px;">
  <video loop muted autoplay playsinline disableRemotePlayback x-webkit-airplay="deny" disablePictureInPicture style="width: 100%; height: 100%; object-fit: cover; position: relative; z-index: -1">
    <source src="/assets/vidrio/webcam_320.mp4" type="video/mp4">
  </video>
</div>

There seem to be a few gotchas. It doesn’t work on display: inline elements. It doesn’t work on overflow: visible elements. It apparently doesn’t work directly on img or video elements; you have to put them in wrapper divs (this seems to be undocumented).

Also, in Chrome, the <video> gets drawn over the resize handle, which I believe is caused by this Chromium bug. You can work around it with position: relative; z-index: -1 on the <video>.

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged #programming, #web, #css. All content copyright James Fisher 2020. This post is not associated with my employer. Found an error? Edit this page.