BBcode for 360 Photos with Kuula

For questions, tips and requests concerning this site
Post Reply
User avatar
rod
Site Admin
Posts: 29
Joined: Wed Jul 31, 2019 7:19 am
Location: Boambee East, NSW
Contact:

BBcode for 360 Photos with Kuula

Post by rod » Sat Sep 28, 2019 10:37 am

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:

Post Reply