Planar YUV420 data layout

Question

In my project I use OpenH264 codec, which is said to output data in the YUV 4:2:0 planar format. After decoding I get one array with width * height * 1.5 elements, which, when displaying, looks like this image:

http://o3d.googlecode.com/svn/trunk/samples_webgl/assets/shaving_cream.png

Why there are four areas below the main one (which contains Y - responsible for grayscale - elements ), instead of two, like on my second picture? Is that mean that the format is different or am I wrong and my world just collapsed?

I thought that the resoult should have looked like this:

Answer 1

The accepted answer is totally correct, I'm just adding more information about the conversion to YUV values:

size.total = size.width * size.height;
y = yuv[position.y * size.width + position.x];
u = yuv[(position.y / 2) * (size.width / 2) + (position.x / 2) + size.total];
v = yuv[(position.y / 2) * (size.width / 2) + (position.x / 2) + size.total + (size.total / 4)];

Reference: https://en.wikipedia.org/wiki/YUV