Resizable boxes in pure CSS!

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

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>.

Tagged #programming, #web, #css.

Similar posts

More by Jim

Want to build a fantastic product using LLMs? I work at Granola where we're building the future IDE for knowledge work. Come and work with us! Read more or get in touch!

This page copyright James Fisher 2020. Content is not associated with my employer. Found an error? Edit this page.