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.
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

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