YouTube currently provides 2 types of embedded players. The old object-based player and the new iframe-based player. When you compare them you’ll find that the new player looks exactly like the player on YouTube’s own site, much better than the previous design that the old player is stuck with.

However, the object player has a unique skill the iframe player doesn’t have: It let’s you choose the video quality! When you embed the iframe player at e.g. 960×540 and specify hd=1, the player won’t obey. It will decide that because you are embedding at sub-720 size, you’re not getting that HD quality. Of course your visitor is able to select HD quality from the dropdown menu (or should I say dropup?), but that’s minus 1 point on user experience.

Now on to the good part. I found a fairly simple way to get the new iframe player embed, with HD quality, at sub-HD sizes.

1. Embed the YouTube player.

1
2
3

<div class="ytembed">
	<iframe src="http://www.youtube.com/embed/REPLACEME?autoplay=1&amp;fs=1&amp;hd=1"></iframe>
</div>

2. Set it’s size in the CSS to 720p, (or 1080p) and hide it to not scare the user with a huge player. Instead they will have a huge gap, but that’s not half as scary.

1
2
3
4
5

.ytembed iframe {
	width: 1280px;
	height: 720px;
	visibility: hidden;
}

3. Add or make sure you’ve got jQuery on your site.

1
2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.js"></script>

4. Using jQuery we wait 1500ms so the YouTube player loads the video while in HD size, although invisible.. And then we resize the iframe to your embed’s proper size, and make it visible again.

1
2
3
4
5
6
7
8
9
10
11
12

$(function()
{
 
setTimeout( function()
{
	// set the iframe to the desired size and make it visible
	$('.video iframe').css(
		{'width':'912px','height':'543px','visibility':'visible'}
	);
}, 1500 );
 
});

A weakness of this code I expect to be is the estimated wait time of 1500ms. If YouTube is a little bit slower for an end user than it was for me while testing, they will not get the HD version but one of a lower resolution. If YouTube is a little or a lot faster for an end user than it was for me, they will won’t see the first 1500ms of video. Hardly a problem if you ask me.

A possible improvement I tried to implement but failed, was to hide the horizontal scrollbar until after the video was resized. Because of the space that the initial HD player takes up, even if it’s invisible, users on lower resolutions might see a horizontal scrollbar during the process.

If you have come up with an improvement on this method or you found a way to make the one I described possible, please leave a comment below.

To see this code in action visit welcometoesports.com and click on any video guide.

As many as you want, for whatever you want. Like breakfast!

I made the design in Excel 2007 and copied it over to Adobe Fireworks, keeping even the transparency, where I resized it and cut it into pieces. If you want to use my design you can grab the CSS and from there find the URLs to the PNGs.

Do note that the colored part is not to the pixel precise the value you give it. That was impossible, to have the 3d effect in the graphics they obviously had to be wider than 1px, which means we give up some accuracy by not measuring in the width of the graphics. This is most noticeable when you compare 0 (empty) to 1 and 99 to 100 (full), but for non-scientific purposes it should do fine.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php
function bargraph ( $rating=0, $title='' )
{
	// maximum free width (excl. switch)
	$size['max'] = 535;
	// switch width (for exceptions)
	$size['switch'] = 13;
	// some maths
	$size['fill'] = $rating * ( $size['max']/100 );
	$size['fill'] = round( $size['fill'], 0 );
	$size['empty'] = $size['max'] - $size['fill'];
	//
	$result = '';
	$result .= '<div class="bargraph">'."\r\n";
	$result .= '	<h4>'.$title.'</h4>'."\r\n";
	// decide if we have an exception
	switch ( $rating )
	{
		// rating of 0, we'll have to end empty
		case 0:
			$size['empty'] = $size['empty'] + $size['switch'];
			$result .= '	<div class="empty_start"></div>
	<div class="empty" style="width:'.$size['empty'].'px;"></div>
	<div class="empty_end"></div>'."\r\n";
			break;
		// rating of 100, we'll have to start filled
		case 100:
			$size['fill'] = $size['fill'] + $size['switch'];
			$result .= '	<div class="filled_start"></div>
	<div class="filled" style="width:'.$size['fill'].'px;"></div>
	<div class="filled_end"></div>'."\r\n";
			break;
		// rating somewhere in betweeen, start empty, switch and end filled
		default:
			$result .= '	<div class="filled_start"></div>
	<div class="filled" style="width:'.$size['fill'].'px;"></div>
	<div class="switch"></div>
	<div class="empty" style="width:'.$size['empty'].'px;"></div>
	<div class="empty_end"></div>'."\r\n";
			break;
	}
	$result .= '</div>'."\r\n";
	echo $result;
}
?>

1

<?php bargraph(75,'INSERTTITLE'); ?>

If you like it please leave a comment below. I’ve just installed Disqus so your comments will be in good hands.

Part perfectionism part habit I would describe my music tool-set as. I play everything with Winamp (there’s your habit) because I’ve used the program since 1997 and I know the plugins and hotkeys by heart. I repair ID3 data and rename files with Tag&Rename, and a sometimes a little help from Bulk Rename Utility. All info coming from the near-flawless music database of Discogs.

My music library directory structure, clean as a whistle.

The missing piece of the puzzle for me is a tool that keeps track of my music library and helps me re-discover what I already have. These are some features I am looking for:

1. Drag and drop into a player of choice. (Winamp, VLC, Traktor, SAM Broadcaster etc.)
2. Double click or default playback opens in a player of choice.
3. Search, in both filenames and ID3 tags.
4. Browsing, by directory, artist, album, genre and year.
5. Tagging or bookmarking of tracks, albums and artists. To mark all ‘club bangers’ for example.
6. No modifications to the music itself. All data must be saved outside of the library.
7. A small and simple GUI.
8. At last but not least, lightweight.

Not that much to ask for I think, it’s not rocket science. Unfortunately I haven’t come across the right tool yet. Or maybe I have but I didn’t realize it because there were 100 other features overshadowing these basics.

So this is my call out to you. If you have a recommendation of what software I should check out please send me a tweet, query, email or text and if it turns out to be the one for me I’ll grant you everlasting e-fame here on my blog.

2011/01, added the result.

If you’re reading this you’d probably like to know if I found something to suit my needs.
I did, it’s the internet-fabled and Winamp-nemesis foobar2000 after all.

Foobar is like a starter set of Lego. You don’t get what you want right out of the box, but it’s meant to be customized. With the help of hundreds of freely available plugins you can make it do exactly what you want and show none of the features you wont use. So if you are an avid computer user and don’t mind spending a few hours searching for the plugins you want/need, foobar is truly the music manager of anyone’s dreams. Contrary to what I expected, it has even become my main mp3 player and tagger.

1. Drag and drop into other software.. – Yes!
2. Double click.. – Couldn’t find it, but I decided I didn’t need it anymore.
3. Search.. – Yes
4. Browsing.. – Yes
5. Tagging or bookmarking.. – Yes
6. No modifications to the music itself.. – Yes
7. A small and simple GUI. – Yes, as big or small as you want.
8. Lightweight. – Yes, very.

And finally, here’s how I customized my foobar up til now.

My customized foobar2000, exceptionally functional.

Yesterday I heard of Tumblr again when watching some videos of Gary Vaynerchuck and I decided to check it out once more. Once more because I remember that I had already seen it before when it launched – but I didn’t use it for some reason.

Those of you with a sharp eye will already have noticed that Tumblr is where the style of my current blog logo comes from. I actually didn’t make this logo when launching this blog, I still had it lying around from back when I first heard of the site. Speaking of my blog’s logo, it’s easy to see why I chose to mimic a Tumblr logo at the time, it’s almost as if it’s some form of subliminal advertising in itself with so many identical letters in the right order to spell my name.

But anyway. I checked out what Tumblr offered and for some reason they sold me. But I still had a strong feeling in the back of my head that there was something wrong with the service. After all, I had seen the site before and I didn’t become a user at that time. So I did the only thing left to do: Try it again.

What started out as an enthusiastic journey into a ‘new’ platform ended up as a disappointment, but with a lesson learned. Tumblr is a great platform for a certain type of users, but that user is not me.

This is what I found out when trying to switch from WordPress* to Tumblr:

• Tumblr can be very slow. WordPress is only slow if your host is.
• Tumblr does not allow you to modify an existing theme. No Twitter widget in the sidebar for you unless you design everything from scratch.
• Also, you have no FTP access to try to hack it in.
• Also also, your domain (name.com and www.name.com) will be in use by Tumblr, so you can’t use your domain for passing around links to files anymore like your resume. (A workaround is possible with a subdomain.)
• Tumblr boasts some pretty themes, but most of them are not free. If you’re only interested in free themes, there are a lot more to be found for WordPress. And paid ones too for that matter.
• Tumblr wants to keep everything simple and small. That’s why their default design and dashboard is small. But do you? Do you want to post 1 photo or an entire album?
• Tumblr looks better than WordPress in most area’s. But they don’t follow through all the way: The YouTube embeds don’t do widescreen when needed, the audio player doesn’t stretch all the way, the photo viewer doesn’t run when you don’t click on the corner of the image, and many other inconsistent details. I feel that if you are making something that relies partially on it’s aesthetics that you cannot stop at 95% finished.
• Tumblr is it’s own social network and walled garden. No comments from outsiders is a major drawback.

When using fresh new tools or services like Tumblr it’s important to remember what you really value. In my case it took me less than 24 hours to realize that I absolutely required a Twitter app in the sidebar, a lightning fast webhost, comments for everyone, and complete control of the theme and inner code.

But don’t take my word for it, do your own research and decide what suits you best.

* By WordPress I am referring to the open source blogging software you install on your own webhost, not the hosted service of wordpress.com.

So I asked myself, why don’t I have an autoreply script yet? That would explain to them that we are not watching chat 24/7 and they will have to wait a bit if they want an answer. Well that’s almost as easily done as said.

1. Open your remote scripts editor in mIRC (ALT+R).
2. Start a new file (File > New).
3. Copy-paste the code below in the window and customize it to your liking.
4. Save the file with a name you can remember and ‘Save & Exit’ the remote scripts editor.

1
2
3
4

On *:Open:?:*: {
  msg $nick [AUTOREPLY] Thank you for your message $nick I will read it asap and respond if needed.
  msg $nick [AUTOREPLY] If you close IRC I cannot respond, so please stay online or email me your question instead.
}

Credits go to tv3636 and FordLawnmower for feeding this knowledge to Google.

1
2
3
4

<script type="text/javascript" src="superPopup.js"></script>
 
<a href="popup.php" onclick="superPopup({ url:this.href, width: 640, height: 386, left: 25, top: 150 }); return false;">popup in the top left corner</a><br />
<a href="popup.php" onclick="superPopup({ url:this.href, width: 960, height: 540 }); return false;">popup in the center</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

/*
Super Popup v1.1 by Tim Brugman
www.timbrugman.com
March 21st 2010
 
Changelog:
 * Positioning (top & left) was not working. Adjusted the build statement to make it work (again).
 * Made the default position (when no values are entered) be centered.
 
Super Popup v1 by Eric Webster
www.ericwebster.net
March 26th 2007
 
Super Popup: When using this function on multiple links across a site its best to define a 'type' within your initiate function, if you are defining a popup on a single page you can pass in the options you want as arguments.
*/
 
function f_clientWidth() {
	return f_filterResults (
		window.innerWidth ? window.innerWidth : 0,
		document.documentElement ? document.documentElement.clientWidth : 0,
		document.body ? document.body.clientWidth : 0
	);
}
 
function f_clientHeight() {
	return f_filterResults (
		window.innerHeight ? window.innerHeight : 0,
		document.documentElement ? document.documentElement.clientHeight : 0,
		document.body ? document.body.clientHeight : 0
	);
}
 
function f_filterResults(n_win, n_docel, n_body) {
	var n_result = n_win ? n_win : 0;
	if (n_docel && (!n_result || (n_result > n_docel)))
		n_result = n_docel;
	return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
 
 
function superPopup(args){
	// URL is the only required field. we cannot continue without it.
	if (args.url) {	var url = args.url;} else { alert('url is missing'); return; };
	if (args.type) { var type = args.type;};
 
	// option = (if it was passed in as an argument)? use that value : [IF NOT] use this default value;
	var directories = (args.directories)? args.directories : directories = "no";
	var location = (args.location)? args.location : location = "no";
	var menubar = (args.menubar)? args.menubar : menubar = "no";
	var resizable = (args.resizable)? args.resizable : resizable = "yes";
	var scrollbars = (args.scrollbars)? args.scrollbars : scrollbars = "no";
	var status = (args.status)? args.status : status = "no";
	var toolbar = (args.toolbar)? args.toolbar : toolbar = "no";
	var width = (args.width)? args.width : width = "50";
	var height = (args.height)? args.height : height = "50";
	var left = (args.left)? args.left : (screen.width/2)-(width/2);
	var top = (args.top)? args.top : (screen.height/2)-(height/2);
	var winName = (args.winName)? args.winName : winName = "popup";
 
	/* DEFINE POPUP TYPES */
	if(type == "_blank"){	
		//created to imitate the target='_blank' behavior in html
		var randomNumber = Math.floor(Math.random()*1000);
		var winName="blank" + randomNumber; width=f_clientWidth(); height=f_clientWidth(); 
		scrollbars="yes"; menubar="yes"; toolbar="yes"; directories="yes"; 
		location="yes"; top="0"; left="0";
	} 
 
	if(type == "copyright"){
		height = "500"; width = "70"; scrollbars = "yes";
	}
 
	/* build our complete window options statement */
	var newWindow = window.open( url, winName, 'width='+width+', height='+height+', directories='+directories+', location='+location+', menubar='+menubar+', resizable='+resizable+', scrollbars='+scrollbars+', toolbar='+toolbar+', status='+status+', toolbar='+toolbar+', top='+top+', left='+left );
 
	if (newWindow == null){
		//alert('A popup containing important information was blocked by your browser. Please enable popups for this site in order to view this information.');
	} else { 
		if (window.focus && newWindow) { newWindow.focus() }
	}
}

For a listing of all the options visit Eric’s website or just read the Javascript.

ps. Don’t rely on some features like disabling resizing or disabling the status bar. These do not work anymore in today’s browsers. Tested in Firefox 3.6, Chrome 4.1 and Opera 10.

I’m not a big blogger, I use Twitter for my daily 2 cents that, I feel, deserve some attention. Since the beauty of Twitter, the 140 character limit, can also be it’s downside I will use this blog mainly to publicize the things that don’t fit in a tweet.

kind regards,

Tim