Taking the photo:
- Connect to your phone via the Insta360 app.
- You should be able to set the "front" of the image in the app with the phone. Frame it as you want and then hit Capture.
- This will be the default view in the processed image. (This is the centre of the "equirectangular" photo created by the 360. The edges are stitched together in software).
- Usually the "front" of the camera has the Insta logo and no screen - point this in the primary direction of the photo.
- Export to your phone as 360 image and AirDrop to your laptop.
Preparing the photo and embed link:
- Airdrop the 360 photo as a .JPG file and name appropriately.
- Upload to Momento.com. Ask Stephen for the WAB account.
- On the photo, copy the embed link from the "Paste or share an embed link" menu.
- To make sure you have the correct view as the "front" view on the embedded image, first position it as you want in Momento, then grab the embed link. This sets the correct orientation.
Creating an embed widget for your site:
- Some site builders accept the link automatically.
- Some sites need an iFrame widget to work. Use the following code:
<iframe style="width: 100%; height: 400px; overflow: auto;" src="REPLACE WITH EMBED LINK" frameborder="0" >
</iframe>
Notes:
- Width: 100% will completely fill the width of the container. If you want a fixed size, replace this with width: xxxpx.
- Height: 400px will be 400 pixels tall. Adjust this to either the desired height or 100% (to fill the container).
Warning: When you embed an image in an iFrame, you must make sure all tags are closed, or it will affect the whole page and is hard to fix.
