BBcode for 360 Photos with Kuula

[rod]

I looked at both Momento360 and Kuula to support display of 360 photos (aka "photospheres"). Preferring Kuula, I came up with some BBcode for it that preserves a desired aspect ratio.

Usage:

Code: Select all

[kuula]{SIMPLETEXT}[/kuula]

HTML:

Code: Select all

<style>.ku-embed {position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: none; max-width: 100%;}</style>
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56%;">
<script src="https://static.kuula.io/embed.js" data-kuula="https://kuula.co/share/{SIMPLETEXT}?fs=1&vr=0&zoom=1&thumbs=1&alpha=0.60&logopos=bl&chromeless=0&logo=0" data-css="ku-embed"></script>
</div>

If you don't want JavaScript you can instead use this:

Code: Select all

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: none; max-width: 100%;" frameborder="0" allow="vr,gyroscope,accelerometer,fullscreen" scrolling="no" allowfullscreen="true" src="https://kuula.co/share/{SIMPLETEXT}?fs=1&vr=0&zoom=1&thumbs=1&alpha=0.60&logopos=bl&chromeless=0&logo=0"></iframe>
</div>

Help line:

Code: Select all

Example: [kuula]7qCvv[/kuula]

The "56%" in the HTML above represents an aspect ratio of approximately 16:9 which I like, but it might alternatively be a variable parameter.

Here's an example photo: