Tag Archives: YouTube

Update: Alarm clock

In the past few weeks I’ve been giving my website a facelift and updating many of the projects that were looking a little less presentable than the rest. One of the biggest changes was to the Alarm clock (Live page). Previously the clock had to be set in the source code (which was easy enough for me to do) and set using a time interval. I updated the code so that any user could set their own alarms and use a fixed time rather than an interval. At the same time I improved the general layout of the page and am now rather pleased with how it looks.

Before and after

Alarm clock before the update
Alarm clock before the update
Alarm clock after the update
Alarm clock after the update

Dr Who

I had had an idea for a very long time, which was to animate a song using the canvas and a YouTube video. Someone sent a gif image of some Dr Who actors dancing badly, and I saw this as an opportunity to test out my idea in the simplest way possible. So I put the gif together with the YouTube song and button to play/stop the music and animation.

Links

Live page
GitHub repository

Overview

The YouTube video is hidden from view, so this needed to use the YouTube Javascript API (which I already mastered for the Marble Hornet project) and there is a single button which controls the music and animation. If anyone watches to the end of the song they probably need to get some help.

Challenges

Challenge: This is a very simple prototype.
Solution: This project fell far short of what I wanted it to be a prototype for. It was just a joke to show some friends, but it showed that I could synchronise the YouTube player and DOM elements quite well, so the first stage is complete. The next stage is to make some animation on the canvas. (Resolved)

Screenshot

So uncool
So uncool

IIHE Nobel Prize website

When I started working for the ULB at the IIHE I wanted to get involved with some outreach activities. One of my first activities was the creation of a website celebrating the Nobel Prize in Phsics 2013, which was awarded to Fran├žois Englert and Peter Higgs for the prediction of the scalar (Higgs) boson. This involved collaborating and development using HTML, CSS, and PHP, with multiple language support, search engine optimisation, YouTube integration, and video recording sessions. The results was a webpage where the users of the lab got to show off what they did to the wider world and to show how the rich physics program at the lab was relevant to the prize. It was a fun project to work on, it was my own creation and was excellent practice for working on similar projects in the future.

Screenshot of the IIHE Nobel Prize 2013 websiteScreenshot of the IIHE Nobel Prize 2013 website
Screenshot of the IIHE Nobel Prize 2013 website

Live page

Advent Calendar 2012

This is a collection of YouTube videos as made as an outreach project in December 2012. Each day of Advent gives a different interesting fact about particle physics.

Links

Live page
YouTube acount
GitHub repository

Overview

This is mostly an exercise in using the YouTube Javascript API. It was this project that made me realise that the old Javascript API is now deprecated, which means I will have to update the Marble Hornets project at some point.

Challenges

Challenge: The YouTube Javascript API changed.
Solution: Having already become accustomed to the old YouTube API, it was somewhat frustrating to get used to a new one, but such is life and working with bleeding edge technologies! (Resolved.)

Screenshot

Screenshot of the Advent Calendar 2012
Screenshot of the Advent Calendar 2012

YouTube thumbnailer

This project takes a YouTube uri and provides the appropriate thumbnail images.

Links

Live page
GitHub repository

Overview

Occasionally it’s useful to have the thumbnail for a YouTube video, and I often forget the exact path for doing this. So I wrote this script that fetches the uri for the user.

Challenges

Challenge: The uri had to be parsed.
Solution: Since this is entirely Javascript based and in the browser there are no safety issues associated with the parsing. Upon failure the page simply tells the user there was a problem. (Resolved)

Screenshot

YouTube thumbnailer
YouTube thumbnailer

Alarm clock

This project was written very quickly one evening to give myself an emergency alarm clock after my phone was stolen. As a result it is not very user friendly.

Links

Live page 1
GitHub repository

Overview

This project simply plays a YouTube video after a fixed period of time. The alarm plays a fixed number of times at regular intervals.

Challenges

Challenge: Ideally, the user should be able to change the settings for the alarm.
Solution: I didn’t have time to add a user interface (as doing so would have caused me to lose sleep!) (To be revisited.)

Screenshot

A screenshot of the alarm clock
A screenshot of the alarm clock

That weird part of YouTube

One of the most fruitful memes on the internet is “That wierd part of YouTube”. I saw an opportunity to createa a service to find the weirdest videos on YouTube, and I made this webpage.

Links

Live page
GitHub repository

Overview

This page uses the YouTube Javascript API to load pairs of YouTube videos. The user then votes on which one they think is “weirder”, and two new videos are loaded for comparison. The backend is handled using PHP with a MySQL database to store and retrieve the video ids. The user can submit their own videos with client side validation of the URI and server side sanitisation to prevent MySQL injection attacks. The statistics associated with each video are also displayed, showing how many times each “won” or “lost” a comparison.

This project was never actually released outside my webspace, despite my original intentions. This is because YouTube is very clear about its branding policies- a third party cannot use the word “YouTube” without explicit permission, and the meme requires the name “YouTube” to be used. As a result this was only ever shown to my friends and never received much traffic. I may revisit this later and release to the general public with a different name.

Challenges

Challenge: As usual, this uses the YouTube Javascript API and all the difficulties that come with that.
Solution: The YouTube Javascript API is second nature now. This wasn’t difficult at all! (Resolved)
Challenge: The user should be able to recommend videos.
Solution: The interface to add suggestions had to be simple to use, so I made the form as clean as possible. The input had to sanitised as well. The URI is matched to a regular expression client side before submission, and sanitised server side to prevent injection. The server side sanitising is very easy given that it must consist of exactly 11 characters in the set [A-Za-z0-9_\-]. (Resolved)
Challenge: This page needed a catchy motif.
Solution: I wanted an image of YouTube videos falling from the sky, as if the videos has been rejected and thrown onto a pile. I had to emulate the YouTube logo using vector graphics with the canvas, then randomly generate an collection of them that wrapped around in the horizontal direction for the wallpaper. It was fun to make, and I may make a wallpaper generator based on this concept. (Resolved)

Screenshots

Some YouTube weirdness
Some YouTube weirdness
The automatically generated wallpaper
The automatically generated wallpaper