Needledrop: A Turntable Interface for Music Playback

Leveraging the JavaScript YouTube Player API and with a good pinch of CSS on top, Thomas H. Park created this record player for you to play with.

Drop the needle and find your favorite track, more or less. It’s fuzzy and inexact, and emphasizes the continuous listening experience an album can be.

Clever usage of repeating-radial-gradient to create the grooves of the record.

Needledrop →
Needledrop (Blog Post) →

This Video Has $viewcount Views

Tom Scott has uploaded a video to YouTube whose title reflects the number of views the video has.

The title of this video should change with the times. But nothing lasts forever: here’s the story of how I made it work, why it used to be easier to make that work, and how it all ties in to the White Cliffs of Dover and the end of the universe.

Extra points for giving me a trip down to memory lane just by mentioning the term “Web 2.0” by name

🤓 Tom has actually done this kind of thing before in his video on why Denmark is a few milliseconds behind the world: that video’s title is constantly updated to accurately represent the current time-difference in Denmark.

Watch PIP YouTube videos on macOS with pipcorn

With pipcorn you can spawn a picture-in-picture YouTube player on your Mac without installing anything!

Install it globally using npm, or run it directly using npx:

npx pipcorn https://www.youtube.com/watch?v=dQw4w9WgXcQ

Basically it’s a wrapper around ytdl (to get the MP4 URL) and open-pip-cli (to open a PIP player).

Love the name, too.

pipcorn Source (GitHub) →

More performant YouTube embeds with <lite-youtube-embed>

By Paul Irish:

Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224X faster.

Installation per NPM:

npm install lite-youtube-embed

Usage:

<!-- Include the stylesheet, this could be direct from the package or bundled -->
<link rel="stylesheet" href="node_modules/lite-youtube-embed/src/lite-yt-embed.css" />

<!-- Include the custom element script -->
<script src="node_modules/lite-youtube-embed/src/lite-yt-embed.js"></script>

<!-- Use the element. You may define uses before the scripts are parsed and executed. -->
<lite-youtube videoid="ogfYd705cRs"></lite-youtube>

Lite YouTube Embed →

A Conspiracy To Kill IE6 — How YouTube got rid of IE6 for us

Great read on how a few YouTube engineers bypassed the internal Google politics in order to abolish IE6 from their list of supported browsers:

One idea rose to the surface that quickly captured everyone’s attention. Instead of outright dropping IE6 support, what if we just threatened to? How would users react? Would they revolt against YouTube? Would they mail death threats to our team like had happened in the past? Or would they suddenly become loud advocates of modern browsers?

A Conspiracy To Kill IE6 →

The nightmare videos of childrens’ YouTube

James Bridle – whom you might know from his autonomous trap for self-driving cars – on the dangers of leaving your children on YouTube unattended:

Writer and artist James Bridle uncovers a dark, strange corner of the internet, where unknown people or groups on YouTube hack the brains of young children in return for advertising revenue. From “surprise egg” reveals and the “Finger Family Song” to algorithmically created mashups of familiar cartoon characters in violent situations, these videos exploit and terrify young minds — and they tell us something about where our increasingly data-driven world is headed.

As he says (*):

If you have small children, keep them the hell away from YouTube.

Having two young children myself I can confirm what he’s saying. Don’t believe it still? Here, watch Peppa Pig making cocaine pancakes, which is only a few recommendations away when watching an “official” Peppa Pig episode.

(*) This is exactly the same message that my former employer Small Town Heroes – who make apps for children such as Ketnet Junior, amongst other things – have been saying during all of their pitches.

Video embeds for the Social

About half a year ago I’ve changed how I embed videos here on bram.us. No, I’m not embedding responsively but I’m embedding Vimeo and YouTube clips along with its poster frame (= the image you see before the video starts playing).

Doing this will force Facebook and Google+ to show that image – and not “the first image it finds on the page”, which could be totally irrelevant – whenever someone shares a link to a video posted on bram.us. For the user visiting bram.us via his browser nothing has changed: only the video is shown.

embed-socially
Sharing a recent bram.us video post containing a poster image (left) vs. Sharing an older bram.us video post containing the default youtube embed code (right)

But how can one make an image only appear for Facebook and the like and not for the user visiting? Well, the trick is simple: just exploit the fact that browsers support iframes, and scrapers don’t. By putting the <img> containing the poster frame inside the <iframe> one can achieve just that:

  • The browser will show the <iframe> and ingore the <img> inside it
  • Scrapers will look for an <img> tag and will find one, albeit inside the <iframe> but that is of no issue.

The code is something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xZY43QSx3Fk" frameborder="0" allowfullscreen>
<img src="https://www.example.org/thumbnail/of/the/video.jpg" />
</iframe>

Now we only need to find out how to get the poster image, in a no-hassle way.

Socially embedding YouTube videos

Using a Google Search Coupon I learned that YouTube offers direct links to poster images. The URL is always in the format of https://img.youtube.com/vi/<videoid>/maxresdefault.jpg (Replace <videoid> with the actual id of the video).

For the YouTube video https://www.youtube.com/watch?v=dCzI521sgqE the poster image can be found at https://img.youtube.com/vi/dCzI521sgqE/maxresdefault.jpg

The embed code will become this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dCzI521sgqE" frameborder="0" allowfullscreen>
<img src="https://img.youtube.com/vi/dCzI521sgqE/maxresdefault.jpg" />
</iframe>

💁‍♂️ Not all YouTube videos have the maxresdefault.jpg image. In that case try fetching the file named 0.jpg instead.

Socially embedding Vimeo videos

Alas Vimeo doesn’t offer direct links to poster images. You can however get to know the poster image by making an API call and extracting the needed value from it. Enter an intermediate PHP script which does the job:

<?php

/**
 * Vimeo Thumbnail Script - Gets the poster frame for a Vimeo video id.
 * @author Bramus Van Damme 
 *
 * Example Request: vimeothumb.php?id=83936766
 */

// Perform a GET request to a given URL.
// Uses `allow_url_fopen` if supported, or curl as a fallback.
function get($url) {
        if (ini_get('allow_url_fopen')) return file_get_contents($url);
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $result = curl_exec($ch);
        curl_close($ch);
        return $result;
}

// Extract ID from the URL
$id = isset($_GET['id']) ? $_GET['id'] : 0;

// Request the image hash with Vimeo
if ($id > 0) $hash = unserialize(get('http://vimeo.com/api/v2/video/' . $id . '.php'));

// Thumbnail found
if ($hash && isset($hash[0]) && isset($hash[0]['thumbnail_large'])) {
        header('Content-type: image/jpeg');
        echo get($hash[0]['thumbnail_large']);
}

// No thumbnail found: return a valid, but blank image
else {
        header('Cache-Control: no-cache');
	header('Content-type: image/gif');
	header('Content-length: 43');
	echo base64_decode('R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

// EOF

The script can of course be improved (referrer checking, caching, etc.) yet the gist of it is there.

Upload the script to your web server and finally embed code will become this:

<iframe width="560" height="315" src="https://player.vimeo.com/video/83936766?title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
<img src="https://example.org/vimeothumb.php?id=83936766" />
</iframe>

Happy embedding!

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)