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

👋 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!

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