Skip to main content
CSS is fun and cool and I like it.
Article

Some Innocent Fun With HTML Video and Progress

The idea came while watching a mandatory training video on bullying in the workplace. I can just hear High School Geoff LOL-ing about a wimp like me have to watch that thing.

But here we are.

The video UI was actually lovely, but it was the progress bar that really caught my attention – or rather the [progress].value. It was a simple gradient going from green to blue that grew as the video continued playing.

If only I had… Read article “Some Innocent Fun With HTML Video and Progress”
Article

What Does `playsinline` Mean in Web Video?

I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite clear and I feel a little silly for not knowing it.

With it in place, like this:

<video src="..." controls playsinline</video

Mobile browsers, will play the video right where it is instead of the default, which is to open it up fullscreen while it plays.… Read article “What Does `playsinline` Mean in Web Video?”

Article

Fluid Width Video

IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <video tag. You might be using YouTube, Vimeo, or some other video provider that provides <iframe code to display videos. Let’s cover how to make them all fluid width while maintaining an … Read article “Fluid Width Video”

Article

An Introduction to the Picture-in-Picture Web API

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop a video out into a small floating window that stays above all others, so that they can keep watching while doing other things. It’s an idea that came from TV, where, for example, you might want to keep watching your Popular Sporting Event even as you browse the guide or even … Read article “An Introduction to the Picture-in-Picture Web API”

Article

Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox

In this week’s roundup: fighting shifty layouts, some videos might be a bit stalled, and a new way to take screenshots in Firefox.… Read article “Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox”

Article

Improving Video Accessibility with WebVTT

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
– Tim Berners-Lee

Accessibility is an important element of web development, and with the ever-growing prevalence of video content, the necessity for captioned content is growing as well. WebVTT is a technology that solves helps with captioned content as a subtitle format that integrates easily with already-existing web APIs.

That’s what we’re going to look at here in this article. … Read article “Improving Video Accessibility with WebVTT”

Link

Native Video on the Web

TIL about the HLS video format:

HLS stands for HTTP Live Streaming. It’s an adaptive bitrate streaming protocol developed by Apple. One of those sentences to casually drop at any party. Äh. Back on track: HLS allows you to specify a playlist with multiple video sources in different resolutions. Based on available bandwidth these video sources can be switched and allow adaptive playback.

This is an interesting journey where the engineering team behind Kitchen Stories wanted to switch away from … Read article “Native Video on the Web”

Link

Algorithmic Layouts

Article

Recent Videos!

I’ve recorded a decent number of videos lately, most of which are pairing with someone and digging into a topic as I glean as much information as I can! Several of these are sponsored, in that they are a part of an advertising package. Hopefully, you know me well enough that I don’t work with companies I don’t like or that sell something I don’t think you’d be good buying, but hey, heads up. … Read article “Recent Videos!”

Article

Responsive Knockout Text With Looping Video

Here’s an idea! Let’s make an an HTML <video></video> play inside the shape of some letters. Like “Knockout Text” except instead of an image behind, it’s video. … Read article “Responsive Knockout Text With Looping Video”