GimbalGuru.com
360 Camera Basics 360 Camera Techniques

360 CAMERA BASICS: How to add 360 photos and videos to your blog or website (in just 3 steps!)

Adding a 360 photo or video to your blog or website is easy, and you can even make the 360 photo or video viewable on a VR headset.  Here’s how to do it:

Step 1: Use a standard 360 photo or video.

Before you begin, make sure your 360 photo or video is already in standard equirectangular format which looks like a rectangular image where the upper third and bottom third look distorted (see above).

A few 360 cameras such as the Ricoh Theta V automatically produce standard equirectangular photos straight out of the camera.  However, for most 360 cameras, the photo or video you take will look like two circular fisheye images next to each other (see below).  To make it viewable in 360, the double circular fisheyes have to be stitched into a single image, called an equirectangular image.   A few cameras have the circular fisheyes as separate files.

360 video stitching from double fisheye to standard equirectangular
360 video stitching from double fisheye to standard equirectangular

Whether you have a single file with two circular fisheyes, or two separate fisheye files, you’ll need to stitch them with the software for your 360 camera.

Step 1A:  If you edited your 360 photo or video.

If you edited your 360 photo or video, your editing software might not save the 360 file correctly to be recognized by other software as 360.  If that’s the case, you’ll need to reinsert the 360 metadata using either of these software:
(i)  For 360 photos, use Exif Fixer.
(ii) For 360 videos, use the Spatial Metadata Injector Tool.
With both programs, you simply select your edited 360 file to create a new version with the correct 360 metadata.

Step 2. Upload your 360 photo or video to a 360 sharing site.

The next step is to upload your 360 photo or video to a site for sharing 360 content.  There are dozens of them.  Most of them will recognize a 360 photo or video (if not, see step 1A above).  Here are some that you can try:

Facebook (free):  accepts both 360 photos and 360 videos.  VR headset viewing app available only on Oculus headsets (Oculus Rift, Gear VR, or Oculus Go).   360 videos can use the Guide feature for keyframing points of view.  However, note that embedded 360 photos and videos from Facebook will clearly show they are from Facebook.  Here’s a sample 360 video posted on Facebook (shot on Mi Sphere):

YouTube (free): 360 videos only (2D 360 or 3D 360).  VR headset viewing app available only on Daydream or Playstation VR.  Higher quality playback compared to Facebook. Here’s a sample:

Kuula (freemium): 360 photos only.  Can add special effects such as filters and simulated flare.  Popular not just for 360 photos but also 360 graphics and illustrations.   Photos can be viewed on all headsets. Here’s a sample shot with the GoPro Fusion:

Veer (freemium): accepts both 360 photos and videos, and some other newer formats such as 3D 180.  Photos and videos can be viewed on all headsets.  They offer prizes to users from time to time, such as VR headsets or cameras. Here’s a sample:

Roundme (freemium): 360 photos only.  Supports high-resolution 360 photos.  Sample (shot with Insta360 Pro):

Vimeo (paid): 360 videos only.  Higher quality playback compared to YouTube or Facebook.

Step 3.  Embed the 360 photo or video into your blog or website.

Next, get the embed code for the 360 photo or video and paste into your blog or website’s HTML.  To get the embed code, click on “Share,” where embed will usually be one of the options.   The big exception to this is Facebook, where you click on the three dots in the upper right corner of the post and select ’embed.’

Once you’ve copied the embed code, just paste it into the HTML for your blog or site.  That’s all there is to it!

WordPress plugin alternative

For WordPress users, another alternative is to use a plugin called 360 photo sphere by Nathan Goodfellow.  This plugin can show a 360 photo in a simple way.  Here is where you can download the plugin.

About the author

Mic Ty

2 Comments

Click here to post a comment