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.
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>
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?
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.
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.
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.
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).
πββοΈ 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: