Category: video

Responsive Knockout Text With Looping Video

Here’s an idea! Let’s make an an HTML <video> play inside the shape of some letters. Like “Knockout Text” except instead of an image behind, it’s video. A live demo will explain more clearly: See the Pen basic pen by Giulio Mainardi (@mgiulio) on CodePen. A key objective here is to develop this...

Screen Recording Utilities for macOS

I record quite a few short little videos. Sometimes for use demonstrating bugs or weirdnesses. Sometimes right here for the blog. A lot of times for Instagram or other social media. Allow me to get SUPER NITPICKY about what I like.Multiple formats. Sometimes you need a GIF. Sometimes you need an MP4. Sometimes you ...

Full Page Background Video Styles

Making a full page background video is slightly trickier than a full page background image. Over on the Media Temple blog, I take a look at how that’s done, but then also what the design patterns are once you’ve done it. You likely need text over top the video, so do you center it? Do you let the page scrol...

Optimizing GIFs for the Web

Ire Aderinokun describes a frustrating problem that we’ve probably all noticed at one point or another:Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm...

The Art of Labeling

There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome://flags/ and turn on in the DevTools settings. Wrappi...

What Comes Next Is the Future

Matt Griffin’s documentary about the web, now available to watch free on Vimeo. Direct Link to Article — PermalinkWhat Comes Next Is the Future is a post from CSS-Tricks ...

Cloudinary – Real-Time Video Transcoding and Management in the Cloud

Advertise here via BSA Web and mobile developers face many challenges when trying to manage videos on their sites and in their apps. The Cloudinary Video Management solution simplifies the process by enabling developers to quickly and easily optimize and transcode videos in real-time in the cloud. The solution, which ...

Artsy Media Pop Up Effect

View demo Download source Today we’d like to share some artsy fun with you! We created some proof-of-concepts for simple media pop ups. The idea comes mainly from Forward Festival’s website and Tim Holman’s rad GifLinks project. We adventured ourselves with mix-blend-mode, masks and clip-path. Please...

One-Click Desktop, Cam, & Mic Recording Tool for Chrome

Advertise here via BSA Opentest is the fastest way for you to share knowledge and collaborate more easily through video. The seamless experience makes it perfect for: Walking a co-worker through a project, Bug tracking/QA (both web & mobile), Personalized sales demos, Customer support. Opentest let’s you do all...

New `video` Policies for iOS

This is pretty big news: earlier today the WebKit team announced that iOS 10 will now support silent <video> elements with the autoplay attribute, which is a big deal for performance. Jer Noble describes the update in much more detail:It turns out that people these days really like GIFs. But the GIF format tur...