Back to support

Custom CSS in Kuula embeds

This guide shows how to control the size and layout of a of tour embedded o a webpage. It's done using custom CSS and we illusrtate this with two examples of typical cases: full window embed and responsive embed.

What is CSS?

Befire we start, let's explain what CSS is. It stands for Cascading Style Sheets and it is a layout definition language used on every page on the web. It's a pretty vast technology, that offers a wide array of features and can take years to master. This article by necessity merely scratches the surface.

For the sake of this article, we tried to keep things simple. This guide only assumes that you have access to and website content editor or its source code and that you can add CSS style properties.

Preparing the embed code

To use custom CSS with your embedded tour, you need to select the use CSS to set size box at the top of the Export Editor:

After that, you can adjust other settings on that page to your liking and, when ready, copy the embed code. For this tutorial, it doesn't matter whether you grab the JS or HTML code, but if you want to learn more about the difference between those to, you can read this article.

The important thing here is that the embed code now has a class name attached to it, as highlighted in the HTML embed example below. The JS embed code creates the same attribute behind the scenes.

<iframe class="ku-embed" frameborder="0" allowfullscreen allow="xr-spatial-tracking; gyroscope; accelerometer" scrolling="no" src="https://kuula.co/share/collection/7lPhR?fs=1&vr=0&zoom=1&sd=1&autorotate=0.67&thumbs=1&chromeless=0&logo=1"></iframe>

You will use the name of this class ku-embed later on to reference the embedded tour in the CSS code.

Once you paste the embed code into your webpage HTML, you can add the styles. To find out how, please check your platform documentiton. If you are using Wordpress for exmaple, here's a guide.

Example 1. Full window embed

The first example will feature a full window embed. As the name suggest, the tour will be scaled to the entire browser window area.

Open your website editor, find the approproate place to add a CSS style and paste this snippet:

.ku-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Let's examine this code, line by line:

The style starts by referencing the Kuula player by declaring the selector .ku-embed. The dot preceding the name of the class is required for correct CSS syntax, so don't forget to add it.
In the first property, we say that the embed should use an absolute position. It means that it will positioned in relation to the browser window, and not in relation to other element on the page.
Next, we tell the browser that the embed should start in the top/left corner of the window, in other words: 0 pixels from the top and left
Finally, we say that it should stretch to the entire window area, which is why width and height are set to 100%

Click here for a live demo. This way of defimig the size of the embed is responsive by default. You can resize the browser to see how the embed adapts it's size.

Example 2. Responsive embed

This is a more complex scenario, where the embed will adapt its width and height based on the screen resolution. Here's the full CSS code:

.ku-embed {
    width: 100%;
    max-width: 800px;
    height: 300px;
}

@media(min-width: 500px) {
    .ku-embed {
        height: 400px;
    }
}

@media(min-width: 600px) {
    .ku-embed {
        height: 500px;
    }
}

The first part above is similar to the previous example. Except this time we do not need to define the position property, since we need the element positioned in relation to it's parent, not the entire window. In this case the parent element is a block containing the headers, the paragraphs and the embed itself.

Next, we tell the browser that the width of the embed should be 100% of the parent. But we also add another property: max-width This caps the width to a maximum of 800 pixels. If the browser window is larger than that, the size of the player will stay at 800.

Now that we took care of the width of the player, we need to deal with it's height.

At first, we define the height of the embed to be 300 pixels. The blocks that follow, starting with @media, are called media queries. They tell the browser that if the width of the screen exceeds 500px and 600px, the height of the player should change to to 400px and 500px, respectively.

Click here for a live demo. Try to resize your browser to see how the width and height of the player changes.

Mozilla Developer Network

As we mentioned at the beginning of this guide, this article offers is a tiny glimpse into what it can do with custom CSS code. If you are interested in learning more, the Mozilla Developer Network (MDN) offers some great tutorials. Here's a few links to get your started: