Custom Styles

This is a feature that is only available for project players that are not contained within a lightbox. With the below setup, it is possible for properties such as height and width to be controlled using CSS and media queries, which gives greater control for different screen sizes.

The first step is to add enableExternalCSS to the smrtzr-project, which can be done in code or with the embed-sdk option in the share popup within the Smartzer app.

<smrtzr-project enableExternalCSS projectId="v/11111111111"></smrtzr-project>

This will expose the container of the player that can be now targetted with the below selector:

smrtzr-project::part(smrtzrProjectContainer) {
  ...your css here;
}

Below is an example of manipulating the player's height for different device sizes. Although it is possible to use other css properties, it is advisable to mainly use height and width as to not break the behaviour of the player.

smrtzr-project::part(smrtzrProjectContainer) {
  height: 80vh;
}

@media (min-width: 770px) {
  smrtzr-project::part(smrtzrProjectContainer) {
    height: 85vh;
  }
}

@media (min-width: 1250px) {
  smrtzr-project::part(smrtzrProjectContainer) {
    height: 90vh;
  }
}