Options for inserting tour code


Code block with width and height set in iframe statement

<p align="center">
    <iframe width="640" height="390" frameborder="0"
            src="https://360-tours-edinburgh.vr-360-tour.com/e/ZDsBdC-sqMI/e?hide_nadir=true" >
    </iframe>
</p>

 

Responsive container maintaining aspect ratio (need to know aspect ratio in advance)

    <div style="position:relative; height:0; padding-bottom:56.25%">
        <iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" 
            src="https://tours.3dscotland.co.uk/shaletrail" 
            name="Shale Trail 3D Tour" 
            width="100%" height="100%" frameborder="0" allowfullscreen="true" 
            allow="fullscreen; accelerometer; gyroscope; magnetometer; vr; camera; microphone">
        </iframe>
    </div>

Flexbox with column direction and flexgrow enabled to maintain widow height

<div style="display:flex;flex-direction:column;min-height:100vh;">
    <iframe style="border:none;flex-grow:1;"
        src="https://360-tours-edinburgh.vr-360-tour.com/e/ZDsBdC-sqMI/e?hide_nadir=true">
    </iframe>
</div>

AWS Test

<div style="display:flex;flex-direction:column;min-height:100vh;">
    <iframe style="border:none;flex-grow:1;"        
        src="https://server.mostlydrivel.com/">     
    </iframe> 
</div>