Styling

<parone> elements can ingest an external stylesheet with the stylesheet param.

<parone-video-block
  stylesheet="~/style.css"
  feed="YOUR_FEED_ID"
  content-key="CONTENT_KEY"
>
</parone-video-block>

Video Block

The following classes are used for single video blocks. For configuring a Video Block, see Configuring Video Block.

.custom-player {
  /* CSS settings to change player element */
  /* This includes the video wrapper, title, description, and publisher logo */
  background-color: #021f1b;
  color: white;
  grid-template-areas: "video" "title" "description";
}
.custom-video {
  /* CSS settings to change video wrapper */
  /* This includes the video tag, the overlays,and the controls */
}

.custom-player-logo {
  /* CSS settings to change player logo */
  display: none;
}
.custom-player-title {
  /* CSS settings to change player title */
  font-size: large;
  padding: 5px;
  width: 90%;
  justify-self: center;
}
.custom-player-description {
  /* CSS settings to change player description text */
  padding: 5px;
  width: 90%;
  justify-self: center;
}

.big-play-button {
  /* CSS settings to change center play button color */
}

Thumbnail Carousels

The following classes are used for thumbnail carousels. For configuring a carousels, see Configuring Carousels.

.custom-thumbnail-carousel {
  /* the whole carousel element */
}
.custom-thumbnail-carousel-card (
  /* the card of a video  */
)
.custom-thumbnail-carousel-card-image {
  /* the image of the thumbnail  */
}
.custom-thumbnail-carousel-card-logo {
  /* logo */
}
.custom-thumbnail-carousel-card-title {
  /* title */
}
.custom-thumbnail-carousel-card-description {
  /* description */
}

Playlist

The following classes can customize a Playlist. For configuring a Playlist, see Configuring Playlists.

.custom-player {
  /* CSS settings to change player element */
  /* This includes the video wrapper, title, description, and publisher logo */
  background-color: #021f1b;
  color: white;
  grid-template-areas: "video" "title" "description";
}
.custom-video {
  /* CSS settings to change video wrapper */
  /* This includes the video tag, the overlays,and the controls */
}

.custom-player-logo {
  /* CSS settings to change player logo */
  display: none;
}
.custom-player-title {
  /* CSS settings to change player title */
  font-size: large;
  padding: 5px;
  width: 90%;
  justify-self: center;
}
.custom-player-description {
  /* CSS settings to change player description text */
  padding: 5px;
  width: 90%;
  justify-self: center;
}

/* Video Playlist Component */
.custom-playlist {
  /* This is the wrapping class of the entire component */
}

.custom-publisher-info {
  /* This class contains the distributor logo and playlist name */
}

.custom-playlist-publisher-logo {
  /* This is the logo of the distributor (you) */
}
.custom-playlist-name {
  /* This is the name of the feed you are using for the playlist */
}
.custom-playlist-video-list {
  /* This is the list of videos */
}
.custom-playlist-playlist-card {
  /* This is the card of a video in the list */
}
.custom-playlist-playlist-card-thumbnail {
  /* This is the thumbnail of a video in its card */
}
.custom-playlist-playlist-card-thumbnail-live {
  /* This is the live tag of livestream in its card */
}
.custom-playlist-playlist-card-name {
  /* This is the name of a video in its card */
}
.custom-playlist-playlist-card-description {
  /* This is the description of a video in its card */
}

Multi-Playlist Carousel

The following classes can customize a Multi-Playlist Carousel. For configuring a Multi-Playlist Carousel, see Configuring Multi-Playlist Carousel.

.multi-feed-carousel {
  /* top level */
}
.multi-feed-player {
  /* the video player */
}
.multi-feed-container {
  /* holds the feed rows */
}
.multi-feed {
  /* a feed row */
}
.multi-feed-carousel-name {
  /* the feed name  */
}
.multi-feed-video-list {
  /* the list of videos */
}
.multi-feed-nav-button {
  /* targets both nav buttons */
}
.multi-feed-nav-prev {
  /* targets prev nav buttons */
}
.multi-feed-nav-next {
  /* targets next nav buttons */
}
.video-card {
  /* targets the video card */
}
.video-card-thumbnail {
  /* targets the video card thumbnail container */
}
.video-card-thumbnail-image {
  /* targets the video card thumbnail */
}
.video-card-title {
  /* targets the video card title */
}

mediaHUB

See styling mediaHUB for instructions to style mediaHUB.

State Classes

📣 Special thanks to Chato from SwingU for this idea!

We provide CSS classes that reflect the current state of the video player. These classes are located at the top level of the video player. This means that for our pre-built components, these state classes are not located at the topmost level of our custom element or on the HTML video tag. They wrap the video tag, description, title, producer logo, our overlays, the captions, and the controls. This allows customization of appearance based on player state purely through CSS.

The currently available state classes are as follows:

Docked State Class

The following classes can customize how a docked video appears on the screen.

.docked {
  /* The whole docked window */
}
.docked-close-container {
  /* is what holds the close text */
}
.docked-close-text {
  /* is what holds the close span */
}
.docked-close-icon {
  /* is what holds the close icon */
}

Fullscreen Exit

The following classes can customize the fullscreen exit button.

.fs-close-button {
  /* The whole button  */
}

Styling Addon Features

Captions

Requires Subtitling

ParOne provides a css class to enable publishers to target the Captions block.

.captions {
  /* target the captions */
}

Call to Action

Requires Call-to-Action

📣 Special thanks to Rob D. from GOLF for this idea!

ParOne provides CSS classes that enable publishers to target the Call-To-Action buttons.

.ecom-wrapper {
  /* The entire Ecommerce bar */
}
.ecom-inner-wrapper {
  /* Ecommerce bar content  */
}
.ecom-img-wrapper {
  /* Wraps the icon and chevron  */
}
.animated-chevron {
  /* Animation for the chevron background */
}
.ecom-chevron {
  /* Chevron for expanding the bar */
}
.ecom-text-wrapper {
  /* Wraps the title and subtext */
}
.ecom-title {
  /* Title of the ecommerce icon  */
}
.ecom-subtext {
  /* Subtext of the ecommerce icon  */
}
.ecom-button {
  /* Button  */
}
.ecom-close {
  /* Close icon  */
}