Video.js issues on iPad & iPhone (iOS) - Troubleshooting

I’ve played with video.js to embed HTML5 video a little in the last year but not in any depth. The last time I used it I came across a few hurdles. And today, I was trying to embed a video supplied by a high profile client. For the most part, it went without a hitch but I had issue with the HTML5 video playing on a first generation iPad with iOS 5.x and my iPhone 4 running iOS 6.x (and possibly more iOS devices that I was unable to test in). It was fine in all versions of IE I tested (down to 7), Chrome (mac & PC), Firefox (mac & PC), an android phone and a latest gen iPad that I was able to get my hands on. The client sent an HD 1080p mpeg across which I converted to .mp4 using Handbrake. From previous experience, I knew that I also had to convert this to .webm format so that it would play in Firefox - I believe there are some licensing issues with Firefox using the H.264 codec in .mp4 which gives us the requirement for the .webm format. I used to convert the .mp4 into .webm. Once I had my videos in the desired formats, I embedded the video like so:

This lead me to the above situation with it working pretty much everywhere with the exception of the old iPad and my phone. After trawling the forums and stack overflow, I was no closer an answer so I tried everything I could think of including different encoding via handbrake, different video formats, different video players, messing with the video tag… Finally, I tried reducing the video res from 1080p to 480p and finally managed to get it working - turns out old iOS devices don’t like HD video.