MediaHUB

Requires MediaHUBParOne’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:

Your organization has created a feed.

Integrating MediaHUB

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>

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 { }