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 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
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.
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.
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.
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.
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.
Alternatively, you could also use YouTube to embed your 360° videos: