Embed videos with Article Matching (Web Player)

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

🔑

If you are not a developer or prefer a simpler implementation, you can embed contextually relevant videos with Article Matching from your JWP dashboard.

Requirement

Implement Article Matching

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

1. Create an Article Matching playlist in your JWP 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.
   JavaScript

   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.

💡

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 JWP's hosted iframe.

Requirement

Create an Article Matching playlist

1. Create an Article Matching playlist in your JWP 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.

   Code example: child page

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

3. In the code sample, replace {div_id} with a unique value.

4. 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.

   Code example: iframe on the parent page

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

2. In the code sample, replace {iframe_id} with a unique value.

3. Replace {child_page_url} with the URL of the child page that you created in the previous section.

4. Replace {your_domain} with the domain name of the parent page.

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