[Note: This post was originally published on my Relentless Geek Blog, but was more suited to these pages so was moved.]
The following came about from a requirement we had for the YouTube videos that we embed on the The Noise & Vibration Measurement Blog.
The standard WordPress embed works fine. Just enter the YouTube URL and WordPress creates a nice embedded video. Great. However, many of our videos are screen capture movies of our software products. When viewed in the small embedded window provided by WordPress they are not of much use to the average user as it’s impossible to make out enough detail.
After a brief discussion about whether we should use the introduction piece to camera to advise users to switch to full screen we also realised that by default YouTube doesn’t display our videos in their full 720p HD glory. The default appears to be 360p and the user has to manually select 720p. So my attention turned to what we could achieve through the YouTube URL itself. Surely, it must be possible to tell YouTube to display the video in 720p and even make it use full screen too.
There were a number of false starts. There’s lots of advise around on the web, but much of it refers to obselete versions of youTube. Finally, I came across the following two gems.
- Full Screen. There is actually a better (IMO) alternative to full screen. That is, full browser. In this mode YouTube display the video using the entire browser window, but doesn’t take over the whole screen as fullscreen mode does. And it’s dead easy to use. Just take your normal video URL, say http://www.youtube.com/watch?v=GsF1jnTjRLo and use http://www.youtube.com/v/GsF1jnTjRLo instead.
- HD. So, the only thing left was to figure out how to make YouTube default to the HD version of the videos. There were many articles suggesting the addition of &fmt=18 or similar to the URL, but it seems these are for an older incarnation of YouTube. The final solution truned out to be just as simple, if not simpler. Add ?hd=1 to the URL (remember that’s &hd=1 if you already have other options specified and if you’re writing directly in HTML that becomes &hd=1).
So our original URL of http://www.youtube.com/watch?v=GsF1jnTjRLo becomes http://www.youtube.com/v/GsF1jnTjRLo&hd=1
Then all it need was a further &autoplay=1 and a target=”_blank” in the <a> tag and there it is – a YouTube URL that opens a new browser tab/window, displays full window, in HD and autoplays.
There was one final shortcoming of this approach. It loses the nice embedded window with image that WordPress gives automatically and we were stuck with a boring looking text link. But that was easily remedied with a quick screenshot of the video, photoshop a button in the middle and then wrap our new URL around it in an <a> tag.
An example (or two) can be seen here… http://blog.prosig.com/2011/10/12/new-videos-how-to-calibrate-microphones-accelerometers/
It seems like I have been making websites since before there were websites. I was one of the first in my office to notice the Internet & the Web (Yes, they used to have capital letters) and taught myself HTML & web hosting. Then I made the company’s first website. Since then I have been practicing hard and, now, I really am quite good at it. Over time, this work has led me into the world of marketing, SEO & blogging.
I am a self confessed geek and love anything techy. When not dabbling with software, technology or the internet I am to be found clad in lycra being a #bloodycyclist. Occasionally, I will be found running or going for long walks, but mostly it’s about the bike.