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

I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

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.