youtube
  • Author:Chris
  • Comments:1

Automatic autoplaying full-screen HD video from YouTube using a URL

[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.

  1. 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.
  2. 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/

Sorted!

 

The following two tabs change content below.

Chris

Software Development, Web Design & Marketing Professional at weirdfruit web design

My software obsession began in my youth with hours typing in programs on a Sinclair ZX80. Now I manage a software development team, work on noise & vibration measurement, design websites, do a bit of marketing, blog and still write software when I can.

A few years ago after too long behind a desk and too many beers & takeaways I found myself almost 50 and heading for 18 stones. So I started walking, running & cycling and shed about 70lbs. I’m now often found jogging, walking or clad in lycra being a #bloodycyclist.

I am also slightly obsessed by my Jaguar XKR (a future classic!).

Latest posts by Chris (see all)