Skip to main content

Floating

Caast floating is generally used to promote incoming live or replay on your website. This display is similar to advertising and is used to display your teaser or a preview of your content. It is a great way to generate leads from other webpage of your website.

Settings​

You can configure where on the screen the floating will appear, this setting is also available for mobile devices. You also have the possibility to choose the player behaviour, by default the player will only play 10seconds of the selected content, but you can choose if you want a full length play, only play the teaser or choose to not play the content at all and just tease it with an image.

Style​

/*
* -----------------------------------
* Style for Caast common DOM element
* -----------------------------------
*/

/*
* A set of css variable used to customize the launcher,
* the values came from our configuration but you can overwrite them locally
*/
:root {
  --caast-floating-width;
  --caast-floating-height;
  --caast-floating-background-image;
  --caast-floating-ml;
  --caast-floating-mt;
  --caast-floating-mr;
  --caast-floating-mb;
  --caast-floating-ml-sm;
  --caast-floating-mt-sm;
  --caast-floating-mr-sm;
  --caast-floating-mb-sm;
}

/*
* Wrapper for widget
*/
.caast-floating {
}

/*
* Modifier for widget position
*/
.caast-floating[data-position='bottom-right'],
.caast-floating[data-position='bottom-left'],
.caast-floating[data-position='top-right'],
.caast-floating[data-position='top-left'] {
}

/*
* Modifier for widget ratio
*/
.caast-floating[data-orientation='landscape'],
.caast-floating[data-orientation='portrait'] {
}
/*
* Widget close button
*/
.caast-floating__close {
}
/*
* Widget content wrapper
*/
.caast-floating__content {
}
/*
* Widget image
*/
.caast-floating__image  {
}
/*
* Widget video
*/
.caast-floating__video {
}
/*
* Widget text
*/
.caast-floating__text {
}

Style for mobile​

You can also decide easily to set a different size for the floating when your user are visiting on a small screen device:

@media (max-width: 767px) {
  .caast-floating {
    --caast-floating-width: 160px;
    --caast-floating-height: 90px;
  }
}