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

Question

我在使用 JWP7 时遇到问题，当播放器以纵向或横向模式加载时，它会按预期完全伸展 window，但在播放器仍在播放时更改设备方向时，播放器不会缩放新的 window 尺寸。

代码示例：

$('.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

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

1) iframe ID 属性未正确用引号引起来：

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

应该是：

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

2) 您的 CSS 选择器使用 class 符号而不是元素 ID 进行定位：

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

应该是：

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

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

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

尝试删除此行。

Answer 2

我设法用 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);
            }
});

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

Resizing jwplayer7 iframe when orientation changes

css

iframe

jwplayer