MediaHUB

ParOne’s MediaHUB feature enables partners to configure video assets to be downloaded freely by third parties.

📣 Special thanks to Sherry from the PGA Show for inspiring this idea!

Preflight

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

Integrating MediaHUB

Step 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>

Step 2 - Insert <parone> Tag

Insert the ParOne MediaHUB tag into your site’s <body> section. Replace YOUR_FEED_ID with your FeedID.

<body>
  <parone-media-hub feeds='["YOUR_FEED_ID"]' />
</body>

Confguring MediaHUB

ParOne enables you to select a feed and enable which buttons are you would like users to be able to use.

  • Embedding will enable third parties to copy an iframe code snippet to paste inside of their website or app and attribute all analytics to your organization
  • Downloading will enable third parties to download the video asset for their own purposes. Third parties can then modify and edit on their own free will.

MediaHUB

Copying and pasting the code snippet will render the ParOne MediaHUB wherever it is placed.

Styling

You will need to use the stylesheet parameter to use an external stylesheet.

<body>
  <parone-media-hub feeds='["YOUR_FEED_ID"]' stylesheet="~/styles.css" />
</body>

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