Solution 1 :

I have not tested it myself, but I will have to achieve the same result as you.

I am planning to use height:100vh

Problem :

I have a virtual tour made using 3dVista I’d like to embed as a responsive fullscreen section at the top of a page on my website.

Their documentation describes how to embed it as preset aspect ratios:

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

However, I’d like it to appear as it does at the top of their landing page: https://www.3dvista.com/

Thanks!

By

Leave a Reply

Your email address will not be published. Required fields are marked *