Embedding With JW Player

Welcome to JW Player! We're excited to help you get started putting video on your website.

JW Academy

What goes into a JW Player embed?

A player embed consists of video content plus a player, and the entire javascript library that includes all possible configuration options of the player.

There are a couple of different ways to execute a JW Player embed in code. These two videos, about Basic Embedding and Advanced Embedding, will set you up to make the best decision for your goals about which method to use.

What we'll cover in here is called the single-line embed — it only requires one line of code! This code contains a player ID, a media ID, and javascript JW Player library reference.

JW Academy: Intro to Basic Embedding

 

Once you've placed the single-line embed code in an HTML page, it takes the settings you've selected for that content and that player, and sets them up on a webpage.

Whenever you update videos or players you've embedded via this method, the changes will be published automatically to those live embeds.

Building a Single-Line Embed in the Dashboard

Notes:
  • If you don't want to use the dashboard, you can also program the single-line embed automatically — learn more about that in our developer portal.
  • If you think you'll need a more customizable method of embedding than the single-line embed code, check out the Advanced Embedding Video or our developer documentation.

Adding Content

JW Player provides two methods of adding a video to our platform. You can either upload it, or add an external URL if it will be hosted somewhere else. Click here for more about adding content to the dashboard.

Once your video is added, you may want to change the title, add metadata, and more. Click here for more information about content management & hosting.

Setting a Player

For the player, your JW Player account comes with a few default player options. Select one of these to edit, or create a new player by clicking the "New Player" button.

You can change settings like player dimensions, behaviors, display options, skin, and more. Click here for more information about player settings.

When you're finished, save the player and go back to your content list.

Publish Mode

Click “embed” from the content list or video detail page. Watch as Publish Mode expands, giving you a preview of your embed.

Make sure to check the player title in Publish mode — if this is not the player you wanted, click "change", and select your desired player.

Back in publish mode, you'll notice the single-line embed code — it contains the IDs of the player and video you selected. Click the “copy” button to copy your embed code to your clipboard.

Embedding & Going Live

Once you have your embed code, Simply add it to the body of an HTML document in the code editor of your choice. (Remember, it's always a good idea to test in a staging environment or a page that isn't publicly accessible.)

If you're using Wordpress, you can simply copy and paste the single line embed into Text Mode of your Post editor. For more about the Wordpress editor, use the “Help” section in your Wordpress dashboard.

If you have your own content management system, you can dynamically implement a player by using our APIs. Be sure to check out the next video in this series to learn more about how Advanced Embedding works before you make your decision.

We hope this was helpful! If your embedding result is ever not what you expected, search the rest of the Publisher Support Site and community forums for answers.

 

 

Did you find this article helpful?

Please log in to rate this article.