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:
- Your organization has created a feed.
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.
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 {
}
.sidebar-item {
}
.sidebar-item.selected {
}
.notification {
}
.notification-close-button {
}