Embed videos with Article Matching

Embed contextually relevant videos from your library into your articles.

Article Matching allows you to embed contextually relevant videos from your library into your articles. By making an addition to the playlist property, this feature provides you the following benefits:

  • An automated solution to embed contextually relevant videos from your JW Player library into your articles with no additional editorial resources
  • Increased reach and monetization opportunities for your videos with minimal editorial involvement
  • Potential for increased video engagement

Set up Article Matching without iframes


Requirement

ItemNotes
JW Player libraryThe implementation requires cloud-hosted or self-hosted player library.

If you do not have developer resources or prefer a simpler implementation, please refer to Embed contextually relevant videos with Article Matching.

Implement Article Matching

Use the following steps to implement Article Matching on a page without iframes:

  1. Create an Article Matching playlist in your JW Player dashboard.
  2. On the DEVELOPER RESOURCES tab of the Article Matching playlist, copy the JSON URL.
  3. (Optional) Add parameters from the /v2/playlists/{playlist_id} route to the JSON URL to refine results.

    The search=__CONTEXTUAL__ query must not be changed. This enables Article Matching by populating page metadata when the player is initialized.

  4. Add the JSON URL to the playlist property of a new or existing player that is embedded within your article or template.

For example:

jwplayer("myElement").setup({
  playlist: "https://cdn.jwplayer.com/v2/playlists/1234abcd?search=__CONTEXTUAL__",
  height: 360,
  width: 640,
  autostart: "viewable"
});

Be sure to read these FAQs for more information about Article Matching.



Set up Article Matching using an iframe


To ensure the proper functioning of Article Matching within an iframe, you must pass the metadata of the parent page to the iframe. This enables Article Matching to use the contextual metadata from the page with which the user is engaged instead of the contextual metadata from the iframe.

You must create the Article Matching playlist, create a child page, and create an iframe on the parent page that references the child page.

Use the following sections to implement Article Matching in a player that is embedded within an iframe.

📘

TIP

This section is for users that are implementing their own iframe page. If you don't need to create the page yourself, you can use JW Player's hosted iframe.


Requirement

ItemNotes
JW Player libraryThe implementation requires cloud-hosted or self-hosted player library.

Create an Article Matching playlist

  1. Create an Article Matching playlist in your JW Player dashboard.
  2. On the DEVELOPER RESOURCES tab of the Article Matching playlist, copy the JSON URL.
  3. (Optional) Add parameters from the /v2/playlists/{playlist_id} route to the JSON URL to refine results.

    The search=__CONTEXTUAL__ query must not be changed. This enables Article Matching by populating page metadata when the player is initialized.

  4. Save this URL for use in the following section.

Create a child page

  1. Add the player library to the page.
  2. Add the following code in the body of your page in the location where the player should appear.
<div id="{div_id}"></div>

<script>
  (function() {
    function setMeta(name, value) {
      var meta = window.document.querySelector('meta[property="' + name + '"]');
      if (!meta) {
        meta = document.createElement('meta');
        meta.setAttribute('property', name);
        document.head.appendChild(meta);
      }
      meta.setAttribute('content', value);
    }
    /** Used to pass play/pause messages parent iframe via postMessage **/
    window.addEventListener("message", function(evt) {
      var player = window.jwplayer ? window.jwplayer('{div_id}') : null;
      if (player && evt.data.type && evt.data.type === 'page-meta') {
        setMeta('og:description', evt.data.description);
        setMeta('og:title', evt.data.title);
        player.setup({
          playlist: '{json_url}'
          // the rest of your config here
        })
      }
    });

  }());
</script>
  1. In the code sample, replace {div_id} with a unique value.
  2. Replace {json_url} with the JSON URL from the previous section.

Create the iframe on the parent page

  1. Add the following code in the <body> of the parent page in the location where the iframe containing the child page should appear.
<iframe id="{iframe_id}" src="{child_page_url}"></iframe>

<script>
  (function(iframe) {
    iframe.addEventListener('load', function() {
      iframe.contentWindow.postMessage({
          type: 'page-meta',
          title: document.title,
          description: document.querySelector('meta[name="description"]').content
        },
        '{your_domain}');
    });
  }(document.getElementById('{iframe_id}')));
</script>
  1. In the code sample, replace {iframe_id} with a unique value.
  2. Replace {child_page_url} with the URL of the child page that you created in the previous section.
  3. Replace {your_domain} with the domain name of the parent page.

Be sure to read these FAQs for more information about Article Matching.



Did this page help you?