How to Create PanoMoments

PanoMoments come in two flavors: a 360 PanoMoment that captures the entire 360 degrees and associates space + time, and also a standard PanoMoment that can be thought of as an interactive HD GIF. Both versions create what we consider to be "living photos" and represent a new choice in the world of photography. Convert existing footage, capture something entirely new, or even animate with your favorite software. Simply upload either standard or 360 video, and you'll have a living photo that can be shared on the PanoMoments Android and iOS apps, Twitter and Facebook, embedded into any web-page, or integrated into your own native app via the PanoMoments SDK. To get started, just head over to the Web Uploader, create an account, and upload your first video. Checkout the PanoMoments Wiki for more detailed information on the creation process. And if you're looking for the fastest way to get PanoMoments captured for your E-commerce platform, check out our Capture as a Service program.

PanoMoments SDK

We see PanoMoments as a living canvas. That's why we've released the PanoMoments SDK, so everyone can build incredible interactive media experiences with PanoMoments as the foundation. It supports web, iOS, Android, Unity, and is easy to get up and running. If you'd like assistance in getting things integrated, we're happy to do custom development — just reach out via [email protected]

Embedding PanoMoments

PanoMoments support the oEmbed API which allows the viewer to be embedded across any of the 1000’s of sites that support Embedly. This includes sites like Medium, Reddit, the NY Times, and many more. All you have to do is copy the PanoMoment URL like: https://my.panomoments.com/u/MomentCaptureStudio/m/composite-europe and then simply paste it into any site that accepts Embedly. Here’s a quick demo on how to embed a PanoMoment on Medium:

To embed in sites that don’t directly support the Embedly API, you can just copy / paste either the Embedly Card or iFrame Embed code snippet found on https://my.panomoments.com/me (click the share icon under the PanoMoment you’d like to embed). The Embedly Card snippet looks like this:

<blockquote class=”embedly-card”><h4><a href=”https://my.panomoments.com/u/MomentCaptureStudio/m/composite-europe">Cross-fade Composite</a></h4></blockquote><script async src=”//cdn.embedly.com/widgets/platform.js” charset=”UTF-8"></script>

And the iFrame snippet looks like:

<iframe id=”embedPanoMoment” pano=”PanoMoments” allowfullscreen=”1" allow=”vr” frameBorder=”0" width=”420" height=”320" scrolling=”no” src=”https://my.panomoments.com/embed/5ae8dd1d41b5f60011737a40"></iframe>

You’ll also find the Embedly Card snippet under the <embed> option in the sharing UI on every PanoMoment.

Embed Customization

PanoMoments Pro and Commercial users can further control how embeds are displayed by adding the following query variables to the src URL:

disabledLogo=1
disabledFullscreen=1
disabledShuffle=1
disabledShare=1
disabledQuality=1
disabledInfo=1

For example, the following iFrame will disable the PanoMoments logo and the Info panel:

<iframe id=”embedPanoMoment” pano=”PanoMoments” allowfullscreen=”1" allow=”vr” frameBorder=”0" width=”420" height=”320" scrolling=”no” src=”https://my.panomoments.com/embed/5b0853aa934547001662431e?disabledLogo=1&disabledInfo=1"></iframe>

You can now pass through the scroll position to the embedded iFrame on standard PanoMoments (360 PanoMoment support is coming soon). Just append parallaxScroll=1 as a query variable on the embed src field and you're ready to go. It's simple to do and creates an awesome interactive parallax website design. Check out the simple example (embedded below on desktop browsers) and feel free to play around with the code here - https://glitch.com/edit/#!/panomoments-parallax