如何让Google VR View响应式?

Question

如何让Google VR View响应？

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

我显然已将 CSS 宽度设置为 100%，但当屏幕变得小于视图时，它不会裁剪。

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

实际上，我对响应式嵌入有一些乐趣。

我创建了标准代码，制作了一个 iframe，然后将 iframe 复制到 embedded 中，以响应式方式获取以下代码：

<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>

结果： https://codepen.io/EightArmsHQ/pen/Bdvrrw