HTML

The steps below will integrate ParOne into your existing HTML website.

Preflight

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

ParOne’s demo site

You can view a demo version of the wordpress site here. This site will show you examples of the different configuration of players.

Integrating ParOne

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 video player tag into your site’s <body> section. Replace YOUR_FEED_ID with your FeedID, and the CONTENT_KEY with a content-key from feed. Please see the different Player Configurations for examples specific to the player you are using.

<body>
    <parone-video-block content-key="CONTENT_KEY" feed="YOUR_FEED_ID">
</body>

Dynamic Pages

📣 Special thanks to Brandon from GOLFTEC for suggesting this way.

Dynamic Pages are advanced configurations used for carousels where a user will click a thumbnail and then load a seperate URL to load the video itself. This is useful for those websites that integrate advertisements and want additional click-throughs. Dynamic pages create URLs with “https://yoursite.com/parone/?parone-content-key=” where “parone-content-key” is the ID for a particular video content-key.

NOTE This step is only required if you want to use the Thumbnail Carousels.

Step 1 - Create permalink

Create a page with the permalink “parone” in your site, and add <parone-video-block> in this page. This tag can reside anywhere on the page and be included with any other content or ads.

Step 2 - Get ?parone-content-key=

Dynamic pages are structured as /parone/?parone-content-key=. The feed_id, and parone-content-key variables can be encoded directly into the template.

Below is sample PHP code

// This get_query_var call is an example piece of code. 

function parone_video_player() {
  $contentkey = get_query_var('parone-content-key') 
  $html = "<parone-video-block "
  $html .= ":feed=\"$feed\" content-key=\"$contentkey\" >"
  $html .= "</parone-video-block>"
	return $html
}

AMP Support

ParOne supports use of the <parone-video-block> and <parone-video-block-playlist> components in AMP.

Step 1 - Add <script> Tag

Import the AMP scripts manually via the following snippet:

<script
  async
  custom-element="amp-video-iframe"
  src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"
></script>

Step 2 - Insert <parone> Tag

You must generate both the <parone> tag and the AMP compatible tag.

  • All attributes for normal <parone-video-block> and <parone-video-block-playlist> may be used but must be prepended with ‘data-param’. For example, the feed attribute becomes data-param-feed.

  • An additional attribute, data-param-element-type, may have either block or block-playlist as its value.

<parone-video-block> Usage

<!-- AMP -->
<amp-video-iframe
  data-param-element-type="block"
  layout="responsive"
  data-param-hide-all="true"
  width="16"
  height="9"
  src="https://sdk-amp.parone.io/index.html"
  data-param-env="prod"
  data-param-content-key="825f9cA907E43008FbCf"
  data-param-defaultlang="en-US"
  data-param-feed="1-all-system-videos"
></amp-video-iframe>

<!-- HTML -->
<parone-video-block
  hide-all="true"
  autoplay="true"
  content-key="i0ZoCRQp"
  defaultlang="en-US"
  feed="1-all-system-videos"
></parone-video-block>

<parone-video-block-playlist> Usage

<!-- AMP -->
<amp-video-iframe
  data-param-element-type="block-playlist"
  layout="responsive"
  data-param-hide-all="true"
  width="16"
  height="9"
  src="https://sdk-amp.parone.io/index.html"
  data-param-env="prod"
  data-param-defaultlang="en-US"
  data-param-feed="1-all-system-videos"
></amp-video-iframe>

<!-- HTML -->
<parone-video-block-playlist
  hide-all="true"
  autoplay="true"
  defaultlang="en-US"
  feed="1-all-system-videos"
></parone-video-block-playlist>

Frameworks

React.js

If you are using a framework such as React you can still use our SDK using the same steps as above.

React requires no further customization, although it is generally recommended to wrap WebComponents in a wrapper React component.

Vue.js

If you are using a framework such as Vue you can still use our SDK using the same steps as above.

The below code setting is helpful so that Vue does not throw a warning regarding an unknown element.

Vue.config.ignoredElements = ["name-of-parone-block-used"]