How to get a video thumbnail in a view to launch video.js player into colorbox when clicked!...does not work in Safari...ideas?

Here is how I did it. ( To keep things simple I have excluded turning off comments etc )

Created a content type eg "video" to hold the data.

Added a field to hold both the actual video file and poster image.
I named it "video file" of type "file" and widget "file". ( n.b. video.js will automatically find the poster from the list of attached files )
Added data types that the field will use eg mp4 etc for video and jpg etc for the poster.
Allowed more than 1 upload - I set it to 5.
Then set "manage display" format to "video.js".

Add an extra image field to hold images for the view. i.e. what we will click on to launch the colorbox.
e.g. call it "video view thumb" with type "image" and widget "image"
I left the "manage display" as default i.e. image.

Save

I now have a video type with a "video file" field and a "video view thumb" field.

Then created a few "videos"

Then created a new view.
Added the "video file" and "video view thumb" to the fields but excluded both from the display.
Formatter for "video file" should be "video.js : HTML 5 Video Player"
Formatter for "video view poster" should be "Image" and image style "thumbnail"

Add the "colorbox trigger"
Set trigger field to "video view poster" and add replacement token to popup field eg for me it was "[field_video_file]" .....excluding the ""'s

Save

Done.

Works fine in FF, IE, Chrome but Safari is bust!

Latest version of Drupal

modules:-

Video.js 7.x-2.2
Colorbox 7.x-1.3
Views 7.x-3.5

update to draw attention to a bug

update

update