Skip to content
ParOne

MediaHUB

Requires MediaHUB ParOne’s MediaHUB feature enables partners to configure video assets to be downloaded, shared, or embedded freely by third parties.

Preflight

Prior to integrating MediaHUB, make sure the following as been completed:

Integrating MediaHUB

  1. Add <script> Tag

    Include the ParOne SDK script tag in your website’s <head> section.

    <head>
        <script src="https://sdk.parone.io/parone.min.js"></script>
    </head>

  2. Insert <parone> Tag

    Insert the ParOne mediaHUB tag into your site’s <body> section. Replace YOUR_MEDIAHUB_KEY with your MediaHUB key.

    <body>
        <parone-media-hub mediahub-key="YOUR_MEDIAHUB_KEY" />
    </body>

Adding a MediaHUB

You can learn more about Adding MediaHUBs.

Styling

The following classes will let you customize MediaHUB to fit your branding.

.media-hub { /* top level */ }
  .media-hub-pagination { }
  .video-grid-container { }
    .media-hub-video-grid { }
      .media-hub-video-card { }
        .media-hub-video-thumbnail { }
        .media-hub-video-info { }
          .media-hub-video-info-content { /* holds the text items */ }
          .media-hub-video-info-buttons { /* holds the buttons */ }
            .media-hub-button-embed { }
            .media-hub-button-download { }
  .media-hub-modal-wrapper { }
    .media-hub-modal-content { }
      .media-hub-video-preview-card { }
  .media-hub-filters { }
    .media-hub-search { }
    .media-hub-embed-options { }
  .media-hub-metadata { }
    .media-hub-parone-categories { }
    .media-hub-private-categories { }
    .media-hub-private-tags { }
  .sidebar-item { }
    .sidebar-item.selected { }
  .notification { }
    notification-close-button { }