Below is your KeyShotVR. To view the KeyShotVR by itself open the J5 KS_VR.589.html file in the J5 KS_VR.589 folder.
<iframe>
tag in the <body>
section of the html file and update the <src>
attribute to reflect the location of the VR on the webserver. Example: <iframe src="J5 KS_VR.589.html" width="640" height="420" frameborder="0" scrolling="no"></iframe>
If you are sharing via email. You will need to send the entire zipped J5 KS_VR.589 folder to the end recipient.
Open J5 KS_VR.589.html in a code editor and modify the value var downScaleToBrowser
to be set to true
, if this was not enabled inside of KeyShot. This will allow the VR to downscale with the browser when resized to mobile resolution.
If you're embedding the VR within an iframe
and wish for the iframe
to be fluid, it is important you add the below JS snippet to your website at the botttom of the page just above the closing body
tag. This script will enable all iframe
tags to be fluid on the page.
var vrIframe=document.getElementsByTagName("iframe");var pNode=[];for(var i=0;i<vrIframe.length;i++){vrIframe[i].dataset.aspectRatio=vrIframe[i].height/vrIframe[i].width;vrIframe[i].dataset.maxHeight=vrIframe[i].height;vrIframe[i].dataset.maxWidth=vrIframe[i].width;pNode[i]=vrIframe[i].parentNode} window.addEventListener("resize",function(){for(var e=0;e<vrIframe.length;e++){var t=pNode[e].clientWidth;if(t<vrIframe[e].dataset.maxWidth){vrIframe[e].height=t*vrIframe[e].dataset.aspectRatio;vrIframe[e].width=t}}});var evt=document.createEvent("UIEvents");evt.initUIEvent("resize",true,false,window,0);window.dispatchEvent(evt)