Poseter image distorted (too long) on HTML5 viewier / iPad

The poster image is distorted (too tall!) on the HTML5 Viewer on iPad, however when the video starts playing the height gets fixed.

Here is the project.

http://umistapotlatch.ca/visite_virtuel…al_tour-eng.php

<hotspot name="pano_video"
url.flash="../../js/vendor/videoplayer.swf"
url.html5="../../js/vendor/videoplayer.js"
videourl="../../videos/mp4/pano_video.mp4"
posterurl="../../videos/affiche-poster/pano_video.jpg"
ath="0.0" atv="0.0"
distorted="true"
scale="1.0"
rx="0.0"
ry="0.0"
rz="0.0"
pausedonstart="false"
loop="true"
volume="1.0"
playbackrate="1.0"
directionalsound="true"
range="90.0"
rangefalloff="0.5"
outofrangevolume="0.0"
preferredformat=""
buffertime="0.1"
ignoremetadata="false"
onvideoready=""
onvideoplay=""
onvideopaused=""
onvideocomplete=""
capture="false"
handcursor="false"
/>

And then this action is called to position the video as the user moves from pano to pano (keeping the video playing). This is the action for Pano 1

<action name="positionVideo">
if(device.html5,
set(hotspot[pano_video].width, '280');
set(hotspot[pano_video].height, '210');
set(hotspot[pano_video].ath, '162.333554');
set(hotspot[pano_video].atv, '-8.255551');
set(hotspot[pano_video].rx, '-8.35989');
set(hotspot[pano_video].ry, '21.92629');
set(hotspot[pano_video].rz, '-0.313159');
);
if(device.flash,
set(hotspot[pano_video].width, '110');
set(hotspot[pano_video].height, '81');
set(hotspot[pano_video].ath, '154.533554');
set(hotspot[pano_video].atv, '-10.955551');
set(hotspot[pano_video].rx, '-11.65989');
set(hotspot[pano_video].ry, '22.92629');
set(hotspot[pano_video].rz, '-1.313159');
);
enableVideo();
</action>

<action name="enableVideo">
set(hotspot[pano_video].visible, 'true');
set(plugin[show_hotspots].visible, 'true');
set(plugin[toggle_gyro].visible, 'true');
</action>