當方向改變時調整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選擇器使用類標記而不是元素標識進行定位：

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

應該是：

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

3）「玩家」的包裝很可能會限制所生成的視頻播放器只被運行一次以下的高度，並可能設置明確的像素值：

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

嘗試刪除此行。