Embedding the viewer in your site

The viewer itself is a web application that is capable of displaying Sibelius scores in any modern web browser. It provides functionality for viewing, navigating, transposing, playing back and printing your scores.

For more information on the viewer and it's features, see [here](08 Viewer features.html).

Fullscreen support

The viewer includes a full screen button, allowing your user to view your score in full screen. In order to enable it, you must specify the allowfullscreen parameter in your <iframe> as follows:

<!-- Embed the iframe, setting the allowfullscreen attribute -->
<iframe src="https://publishing.sibelius.com/viewer/xxxxxxxxx" allowfullscreen></iframe>

Browser support

  • Not all browsers yet support the Fullscreen API
  • If the viewer detects that a browser cannot support the fullscreen API, then the fullscreen button will not be displayed.

For more information, consult this Mozilla Developer Network article

Providing a good experience for mobile users

For mobile users, it's best not to display the SCP viewer in an <iframe>, since it will generally appear frustratingly small for your users. Instead, we recommend displaying the score as a full screen element.

The SCP viewer itself is fully responsive and will display itself appropriately given a wide range of display sizes.

Recommended embedding practices

It's often the case that browsers will draw a border around an <iframe> by default. It's possible to remove or adjust this border using CSS. This is highly recommended to give your users the impression that the viewer is part of the same experience that you're offering on your site.

Give the viewer plenty of space in your site to make it look as beautiful as possible. The viewer is fully responsive, and should adapt well to a multitude of viewport sizes (if it doesn't, please let us know!).

We recommend specifying an <iframe height of 100vh, which will display the viewer at the maximum height of the browser viewport. You'll also want to give the viewer a decent amount of width in your page too. In the example below we show how you might show a 100vh, centered viewer - if nothing else it's good for a quick copy and paste to get you started!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Optional CSS reset -->
<style>
.container {
width: 1028px;
margin: 0 auto;
}

iframe {
border: none; // no borders for us
width: 100%;
height: 100vh; // make the viewer take up the entire height of the browser
}
</style>

<!-- Embed the iframe, setting the seamless attribute -->
<div class="container">
<iframe src="https://publishing.sibelius.com/viewer/xxxxxxxxx"></iframe>
<div>

Generally speaking, when working with styling, it's a good idea to start with a CSS reset tool, or a library that includes one (like Bootstrap).

Responding to events in the viewer

See viewer messages