Google VRビューをどのように反応させることができますか？

Question

Google VR Viewをどう対応させることができますか？

https://codepen.io/EightArmsHQ/pen/mwLyvy

私は明らかに100％にCSSの幅を設定しましたが、画面は表示よりも小さくなるように、トリミングされません。

はJavaScript

$(window).on('load', function() { 
    $(".vrview").each(function(){ 
    var $this = $(this); 
    var id = $this.attr('id'); 
    var src = $this.attr('data-src'); 
    var vrView = new VRView.Player('#' + id, { 
     image: src, 
     is_stereo: false, 
     width: '100%', 
     height: '400px' 
    }); 
    }); 
}); 

CSS

.vrview{ 
    width:100%; 
    max-width:100%; 
} 

しかし、それは何もしていないようです。

私はので、私はこのような何かを行うことはできませんsetWidth(x)またはset('width', x)のような任意のセッターがあるとは思わない：

$(window).resize(function(){ 
    for(var v = 0; v < vrViews.length; v ++){ 
    var view = vrViews[v]; 
    view.set('width', 40); 
    } 
}); 

Answer 1

私はあなたがJavaScriptで幅と高さを省略した場合は、サイズ、その後できると信じてCSSを介してiFrame（.vrviewコンテナではありません）。

Answer 2

私は実際にembed responsivelyで若干の喜びを感じました。

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> 
<div class='embed-container'> 
    <iframe allowfullscreen='true' scrolling='no' src='https://storage.googleapis.com/vrview/2.0/index.html?image=https://s3-us-west-2.amazonaws.com/s.cdpn.io/5961/HY360_0103.jpg&is_stereo=false&' style='border: 0px;'></iframe> 
</div> 

結果：

私は、その後、IFRAMEを作った、標準のコードを作成し、次のコードを取得するために埋め込む応答にはiframeをコピーし https://codepen.io/EightArmsHQ/pen/Bdvrrw