Embed a player with JWP for Wordpress


Without having to manually add code to your WordPress pages, the JW Player for WordPress plugin enables you to create a video experience for your viewers with a cloud-hosted JW Player.

  • Embed videos or playlists
  • Configure video player appearance and location in content
  • With a JW Player Enterprise license, enable advertising

πŸ”‘

You can also embed a self-hosted player with JW Player for Wordpress.



JW Player for WordPress

The JW Player for WordPress plugin can be purchased and downloaded from JW Player's WordPress Certified Partner.

Use the following steps to purchase, download, and install the JW Player for WordPress - Premium plugin:

  1. Purchase and download the JW Player for WordPress - Premium.
  2. Within your WordPress UI, go to Plugins > Add New.
  3. Click Upload Plugin.
  4. Click Choose File.
  5. Select the .zip file.
  6. Click Install Now.
  7. Click Activate Plugin.


Configure the plugin

After the installation has been completed, you must configure the plugin. The JW Player for WordPress plugin enables you to override the settings configured in your JW Player dashboard.

Use the steps in the following sections to configure the plugin:

  1. In your WordPress UI, click JW Player.
  2. Use the following sections in this article to configure the settings on each tab.

The plugin has the following tabs.

TABDESCRIPTION
SettingsConfigure basic player library information and embed settings
Playlist carouselProperty key and secret combination that enables access to a specific cloud-Define the appearance of the playlist widget
SecurityConfigure the security settings for the player
AdsEnable and configure video advertising


Settings tab

The Settings tab allows you to provide information about the player and define when the player can be used.

Use the following steps to configure the player settings:

  1. Enter the cloud-hosted player library URL into the Player library URL field. To locate it:
    • From your JW Player dashboard, click Players.
    • Select the player library you would like to add.
    • Locate the Cloud-Hosted Player Library section under the video preview and copy the URL.
      Press Enter. The plugin updates the page.
  2. Enter the API key and API secret into the API v2 Credentials fields. To locate them:
    • From your JW Player dashboard, click the Settings icon on the top right of the screen.
    • Click API Credentials.
    • Under Property Name click Show Credentials.
    • Copy the API Key and API Secret values.
  3. Press Enter.
  4. Click the Post types toggle next to an option to enable the plugin for the type of WordPress post.
  5. Under Video Player position, select an option from the drop-down menu:
    • Before the content: Video player automatically appears before content for the post types selected in the previous step.
    • After the content: Video player automatically appears after content for the post types selected in the previous step.
    • Custom: Video player appears in the location specified by a Shortcode block for the post types selected in the previous step. You can embed video content using a Shortcode block. NOTE: The player appears only when viewing a preview or published page.
  6. Click the Auto thumbnail toggle to enable automatic thumbnails for the video or playlist.
  7. Click Save changes.


Playlist carousel tab

The Playlist carousel tab enables you to configure the appearance of the playlist widget. All color options accept HEX and RGB color values. RGB color values are converted to HEX color values.

  1. In the Title field, add a title for the playlist widget. Be aware that customizing this field disables automated player localization.
  2. In the Text Color field, select the text color for the playlist widget.
  3. In the Background Color field, select the background color for the playlist widget.
  4. In the Icon Color field, select the icon color for the playlist widget.
  5. Click Save changes.


Security tab

Before making selections on the Security tab, read How to Enable URL (Token) Signing. Verify that any selections made in this tab match the Property Settings in your JW Player dashboard.

  1. If Secure Video URLs is toggled ON in your JW Player dashboard Property Settings, click the Secure Video URLs toggle.
  2. If Secure Player Embeds is toggled ON in your JW Player dashboard Property Settings, click the Secure Player Embeds toggle.
  3. In the Set timeout field, set the duration of time (in minutes) that a token-signed URL is valid.
  4. Click Save options.


Ads tab

πŸ“˜

You must have an Enterprise license to monetize your content with advertising. Upgrade to a Business or Enterprise license now.

The Ads tab enables you to override the ad schedule settings configured in your JW Player dashboard

  1. Click the Active Video Ads toggle to enable ads.
  2. Under Ads Variable, use the toggle to determine how to configure advertisements:
    • Off: Configure advertisements through the sections in the WordPress UI. Several ad-related fields appear. Continue to step 3.
    • On: Configure advertisements through a JSON object. A single Ads variable name field appears. Skip the remaining steps in this section. Use the steps in the following "Manually set up advertising" section.
  3. From the Ads Client dropdown menu, select an ad client.
  4. In the Ad tags field, add a URL or .xml file containing ad tags and a label for the tag.
  5. In the Ad Skipping field, enter the total number of seconds viewers must watch an ad before being allowed to skip.
  6. Under Player Bidding, use the toggle to enable or disable Player Bidding on the video content:
    • Off: The Player Bidding feature is disabled.
    • On: The Player Bidding feature is enabled.
  7. Click Save options.


Manually set up advertising

  1. Within your WordPress template, you must define an advertising object and assign it to a variable. (See the example below.)
  2. In the Ads variable name, enter the defined variable. In the following code example, ads would be added to the Ads variable name field.
var ads =  "advertising":  { 
  client:  "vast", 
    adscheduleid:  "Az87bY12", 
      schedule:  [  
        { tag:  "https://www.domain.com/adtag.xml"  
        }, 
      ] 
};

Example of an advertising object assigned to a variable, ads. The variable, ads, would be placed in the Ads variable name field.



Embed video within your content



Content and a player selection

  1. Create or open a post or page.
  2. Scroll down to and expand the JW Player for Wordpress section.
  3. If you are hosting your videos with JW Player, click Choose. If you are self-hosting your videos, click Add url. Use the following steps for the option selected:


    Choose
    i. Click Choose. The button appears red.
    ii. Click the text box. A list of videos and playlists associated with the JW Player account appears.
    iii. Select a video or playlist. Alternatively, the media ID, playlist ID, or title can be entered into the text box to locate the content.


    Add URL
    i. Click Add url. The button appears red.
    ii. Enter the URL of the video to be embedded.

  4. Click Show options. The Select Player dropdown menu appears containing a list of players associated with the JW Player account.
  5. Choose a video player.

πŸ“˜

To add another video or playlist, click the + icon in the top right corner of the first subsection of the JW Player for WordPress section. To remove a video or playlist, click the - icon in the top right corner of a subsection.



Player location

If you selected Before the content or After the content during the configuration process, your video player automatically appears before or after content for post types you have selected.

If you selected Custom, use the following steps to place the video player in a specific location within your content with a shortcode.

  1. In the JW Player for WordPress section under Media URL, copy the displayed Shortcode. For example, [jwp-video n="2"].
  2. In the open WordPress page or post add a new block where you would like to place the player and type /shortcode to create a Shortcode block.
  3. Paste the shortcode copied in step 1 into the Shortcode block and press Enter.
  4. In the top right-hand corner of the WordPress, window click the blue Update button to save your updates.