html5视频android：全屏保留纵横比

我正在使用视频标签在iPad和Android设备中传输hls。
我在安卓系统中遇到了一个问题，在进入全屏后，视频被拉伸到填满了设备的屏幕，这打破了原来的纵横比

但它在旋转后走对了方向

下面是我正在使用的示例代码，虽然它是hls，但我相信普通视频文件也存在同样的问题

<video id="main-video" src="my_hls_link.m3u8" style="width:100%; height:270px;">
</video> 

---

在Nexus 7安卓4.1和kindlefire安卓4.0中使用chrome进行测试，我只需解决以下问题：

//fixing the bug in android that stretch video on load
      function fix_stretch_video(){
        var check_interval = setInterval(function(){
          $('.pl-loading-btn').css('display', 'block');
          if (player.videoWidth != 0) {
            $('.pl-loading-btn').css('display', 'none');
            $('video').css('width', '99%');
            $('video').css('width', '100%');
            clearInterval(check_interval);
          }
        },100);
      }

在某些设备（或android版本）中不工作。至少在我的Nexus7上有工作

//fixing the bug in android that stretch video on load
      function fix_stretch_video(){
        var check_interval = setInterval(function(){
          $('.pl-loading-btn').css('display', 'block');
          if (player.videoWidth != 0) {
            $('.pl-loading-btn').css('display', 'none');
            $('video').css('width', '99%');
            $('video').css('width', '100%');
            clearInterval(check_interval);
          }
        },100);
      }