MP4 video cannot play on iPad/iPod/iPhone using JW Player shortcode

It seems that this is a bug on JW Player for WordPress plugin
We added JW Player or WordPress plugin shortcode with a mp4 video in it, the video plays on Macbooks and PCs, but it shows blank on iPad or iPod or iPhone.
Although HTML5 as default mode, it doesn’t work.

How to fix that?
1. Browse Media subfolder, find it inside wp-content/plugins/jw-player-plugin-for-wordpress
1. Open JWShortcode.php with PHP/Text Editor
2. Find function generate_embed_code($atts) in line no 233 – 265
3. Replace the function code with following

function generate_embed_code($atts) {
  $version = version_compare(get_option(LONGTAIL_KEY . "version"), "5.3", ">=");
  $embedder = file_exists(LongTailFramework::getEmbedderPath());
  if (preg_match("/iP(od|hone|ad)/i", $_SERVER["HTTP_USER_AGENT"])) {
    $loaded_config = LongTailFramework::getConfigValues();
    $width = isset($atts["width"]) ? $atts["width"] : $loaded_config["width"];
    $height = isset($atts["height"]) ? $atts["height"] : $loaded_config["height"];
    $output = '<video src="' . $atts["file"] . '" width="' . $width . '" height="' . $height . '" controls="controls"></video>';
    return $output;
  } else {
  if (!$embedder && !$version) {
    $youtube_pattern = "/youtube.com\/watch\?v=([0-9a-zA-Z_-]*)/i";
    $loaded_config = LongTailFramework::getConfigValues();
    $width = isset($atts["width"]) ? $atts["width"] : $loaded_config["width"];
    $height = isset($atts["height"]) ? $atts["height"] : $loaded_config["height"];
    $output = "";
    if (preg_match($youtube_pattern, $atts["file"], $match)) {
      $output = '<object width="' . $width . '" height="' . $height . '"><param name="movie" value="http://www.youtube.com/v/' . $match[1] . '&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' . $match[1] . '&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' . $width . '" height="' . $height . '"></embed></object>';
    } 
    return $output;
  } else {
    if (get_option(LONGTAIL_KEY . "player_location_enable")) {
      $swf = LongTailFramework::generateSWFObject($atts, $embedder, get_option(LONGTAIL_KEY . "player_location"));
    } else {
      $swf = LongTailFramework::generateSWFObject($atts, $embedder);
    }
    if (!get_option(LONGTAIL_KEY . "use_head_js")) {
      insert_embedder($embedder);
    }
    return $swf->generateEmbedScript();
  }
  }
}

How to make IE to display iframes with transparent background?

1. Add allowTransparency=”true” property to the iframe

<iframe id="frame_one" src="iframe.php" allowTransparency="true">Browser not compatible</iframe>

2. Add background:transparent to it’s body tag or internal styles in the head section of an HTML page

<body style="background:transparent"></body>

or

<style type="text/css">
html,body { background: transparent; }
</style>