Using 360° media in your web pages

You can embed 360° media into your HTML or even Shorthand Social web pages!

It's quite easy too.

Here's the proof - a 360° image I shot in Texas. Drag the image or use your smartphone's VR headset:

Capturing the media

There are a variety of ways you can capture 360° images and video. 

Using your own smarphone

You can use your own iPhone or Android phone to capture 360° images. The most common way to do this is by using the Google Street View app. 

The Street View app is available for Android and iOS.

The Steet View app includes the Photosphere camera app that lets you capture your 360° images. The app is a little fiddly, but it guides you through the process of capturing multiple images and then stitches them together for you. It's rather like capturing panoramic images.

Dedicated 360° cameras

There's a wide range of 360° cameras available

The University of Sheffield's Creative Media service has Ricoh Theta S cameras for loan. These cameras will let you capture 360° images and videos in a single click.

360° media

Captured images will look like this when viewed normally:

To view as an interactive 360° image or video, you need to either use a viewer app e.g. Street View, Google's Photos app or you can upload to Facebook.

To include 360° media on your own work - a Shorthand Social page or an HTML web page you've made yourself - you need to employ some basic coding skills.

Embedding 360° media

Here's the method I use to embed 360° images into web pages. 

It's also compatible with Google Cardboard or your favourite VR headset.

To embed 360° media you need to:

- host it on GitHub

- use the A-Frame web VR framework

- grab an embed code

But don't worry! I've done all the hard stuff, you just need to follow my guide and use the code I've already made.

Github

You can sign up to GitHub for free. GitHub is a place where you can keep, share  and host code. 

Fork my repository

Once you're signed up to GitHub, the first thing to do in GitHub is fork the code that I've already made. 

Fork just means to make your own copy of the code for you to use and modify.

Just head on over to the GitHub Web VR repository that I've made.

On that page, you'll be able to see all the code involved. Don't worry, you don't need to touch it. Much. 

In the top right, you'll see a button labelled Fork. click it.

This creates your own copy of my code.

Hosting the code

Now you have the code, you need to host it. 

Hosting means you get a web address, or URL that you can view in a web browser as a real web page (rather than looking at the code).

To do this, head on over to the settings page:

On the settings page, you can change the name of the repository if you wish. 

To host the repository, you need to find the GitHub Pages section of settings.

Set the source to master branch and click save:

This will give you a URL that you can view in a web browser.

Try the URL, but it may take a minute or two to work! In a minute, you should see a 360° image I took of  Weston Park in Sheffield.

Upload your media

To see your own image, you need to first upload the 360° image to GitHub. If the image is less than 20MB you can drag & drop the file straight into the repository.

You should see your new image in your repository:

Editing your HTML

You need to now edit the HTML file so that it loads your image rather than the image of Weston Park. 

It's handy at this point to copy the name of your image file for pasting in the next step.

Click on the file called index.html. Then click on the pencil icon to edit the file. 

Look for the line that includes the path to the image:

Replace the image name with your image name:

Commit the changes and view the page from the hosted URL. You should see your image. It may take a minute for the changes to apply so keep refreshing.

Embedding

You need to get the embed code of your hosted URL. 

First, copy the address of your hosted URL. 

Go to the Embed Responsively website and choose the Generic iFrame option.

Replace the URL in the embed box with your own:


Then press the embed button to the right.

You'll then see a preview and an embed code to copy & paste into either Shorthand Social or your own HTML web page.

That's it!

Well, there's more, like adding in sounds and building scenes, but I won't go into that here!

What about Video?

This general principle will work with video, but a slightly different method is used. 

You can only upload files of 20MB or less to GitHub, so you may need to find somewhere else to host.

The code is slightly different - See this example of 360° video and the source code for it. 

Alternatively, you could also use YouTube to embed your 360° videos: