如何在网页上嵌入3DVista虚拟漫游作为响应式全屏？

Question

我有一个使用3dVista制作的虚拟导览，我想在我的网站页面顶部嵌入一个响应式的全屏部分。

他们的文档描述了如何将其嵌入为预设纵横比：

- for 16:9
<div style="position:relative; height:0; padding-top:56.25%"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" src="HTTP://DOMAIN/PATH/TO/INDEX.HTM" name="TOUR NAME" width="100%" height="100%" frameborder="0" allowfullscreen="true" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr"></iframe></div>
- for 4:3
<div style="position:relative; height:0; padding-top:75%"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" src="HTTP://DOMAIN/PATH/TO/INDEX.HTM" name="TOUR NAME" width="100%" height="100%" frameborder="0" allowfullscreen="true" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr"></iframe></div>
- for 1:1
<div style="position:relative; height:0; padding-top:100%"><iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" src="HTTP://DOMAIN/PATH/TO/INDEX.HTM" name="TOUR NAME" width="100%" height="100%" frameborder="0" allowfullscreen="true" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr"></iframe></div>

但是，我希望它出现在他们的登录页面顶部：https://www.3dvista.com/

谢谢!

Answer 1

我自己没有测试过，但我必须达到和你一样的结果。

我计划使用height:100vh