Fluid Width Video →

Jan 23, 2017 |  1 min read |  CSS, HTML

While creating the site used to document my paternity leave, I needed to embed a video on how to roast duck breast in the oven. Embedding a video from YouTube is easy, but Google has specified both its width and height in the embed snippet. This was good enough 10 years ago, but not today with all our fancy responsive web design.

The linked post has many solutions for embedding video with a responsive width based on the users current viewport. I use the method below and it works perfectly.

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

<div class="videoWrapper">
    <!-- Copy & pasted from YouTube -->
    <iframe width="854" height="480" src="https://www.youtube.com/embed/qAfmfCArUgA" frameborder="0" allowfullscreen></iframe>
</div>

Workday Countdown - A Status Board panel

Nov 3, 2015 |  2 min read |  HTML, CSS, JavaScript, iOS

Workday Countdown is a countdown panel for Panic's Status Board 2 application for iOS. Different from the stock Countdown panel, Workday Countdown filters out weekends and public holidays. This provides a more realistic countdown in a work setting where people are not expected to come in on weekends.

View the source on GitHub.

Read More