当方向改变时调整jwplayer7 iframe的大小

Question

我对JWP7有一个问题，当播放器在纵向或横向模式下加载时，它会像预期的那样延伸到整个窗口，但是当播放器仍在播放时，当改变设备方向时，播放机不会缩放新的窗口尺寸。

代码示例：

$('.player').height($window.height()); 

jwplayer("myElement").setup({
   file: "somevideo.mp4",
   width: windows.width,
   height: windows.height,
});

<div id="player">
  <div class="close_btn fadeIn"><img src="/img/close.png" width="50" /> </div>
  <div id='player_frame'>
   <iframe id=""video_iframe></iframe>
  </div>
</div>


@media screen and (orientation:portrait) {
 .video_iframe
 {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  }
}

@media screen and (orientation:landscape) {
 .video_iframe
 {
  height: 100vh;
  width: 100vw;
  }
 }

有什么建议吗？

先谢谢大家。

Answer 1

我设法用jQuery移动定向更改事件修复了它：

    $(window).bind( 'orientationchange', function(e){
            var windowHeight = $(window).height() + 'px';
            var windowWidth = $(window).width() + 'px';

            if(window.orientation == 0) // Portrait
            {
                $("#myElement").height(windowHeight);
                $("#myElement").width(windowWidth);
            }
            else // Landscape
            {
                $("#myElement").height(windowHeight);
                $("#myElement").width(windowWidth);
            }
});

Answer 2

您的代码似乎有一些问题：

1) iframe ID属性没有正确地用引号括起来：

<iframe id=""video_iframe></iframe>

应：

<iframe id="video_iframe"></iframe>

2) CSS选择器使用的是类表示法而不是元素ID：

.video_iframe
{
    height: 100vh;
    overflow: hidden;
    width: 100vw;
}

应：

#video_iframe
{
    height: 100vh;
    overflow: hidden;
    width: 100vw;
}

3) " player“包装器可能限制生成的视频播放器的高度，因为以下内容只运行一次，并且可能正在设置一个显式像素值：

$('#player').height($window.height());

试着移除这一行。