Basic Video Embed

This article goes over the standard JW Player embedding practices for video files. For more information on JW Player's video playback capabilities, see our video section in the Media Reference page. If you are interested in streaming technologies such as RTMP, DASH, or HLS, please see our Streaming section for more info.

JW Player Example

 

The above example uses MP4, since is the most supported format across desktops and mobile devices. For this reason, we strongly suggest to always use MP4 video rather than FLV.
FLV files are typically a larger size and require a Flash installation. This means that FLV files will not play on mobile devices.

3 ways to Embed a JW Player


There are 3 different ways to embed a JW Player. The first option can be done using the dashboard only, the second option is a combination of dashboard and coding, and the third option is for developers. We’ll tell you more about each option below.

Option 1: The Publish Mode

The Publish Mode allows you to quickly take a player with pre-built settings and pair it with a video. The main advantage to this mode is that you get a single line of JavaScript that can be added to your page without having to configure any additional html or JavaScript. JW Player Dashboard comes with three pre-built Cloud Player Libraries based off of the most common settings used.

The JavaScript and iframe embed options contain everything needed for JW Player to work on your page, including the div where the player will render.

  1. Open the publish mode by clicking on the Expand Publish Mode button
  2. Choose a default player or one that you have built. Note: The 480x270 Fixed Width Player is the most basic JW Player.
  3. Choose content from your library that you want to embed.
  4. Copy either the JavaScript embed or the <iframe> embed and place it where you want the video to be rendered on your page.

Option 2: The Cloud Player

The Cloud Player Library URL calls the JW Player JavaScript library PLUS any unique player settings for that player but is not paired with any content.

You can place this code in the <head> of your site, which gives your organization a player to use as a default site-wide. It's likely most relevant if you are a developer, since you can add new player settings to any player that setup on your site. Using a cloud library requires two parts.

Part 1: Adding the JW Player Library to Your Page

  1. Navigate to the Players section.
  2. Click on the 480x270 Fixed Width Player.
  3. Expand the Player Library URL
  4. Copy the URL
  5. Paste the URL into the <head> of your site.

NOTE: The 480 x 270 Player is the most basic player library and contains the default settings previously available in the JW6 cloud hosted library.

Part 2: Creating Your Embed Code

With the player library set up, it's time to actually embed the video. You can insert this HTML in your page, at the exact location you want the video to appear:

<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
    file: "http://example.com/uploads/myVideo.mp4",
    image: "http://example.com/uploads/myPoster.jpg",
    width: 640,
    height: 360,
    title: 'Basic Video Embed',
    description: 'A video with a basic title and description!'
});
</script>

In this above code, the <div> element is used as a container to load JW Player into, which must have a unique id attribute. The setup() block then refers to this ID. However, let's break down each of the configuration options to see what is being affected:

  • file - Which video we'll be loading with JW Player
  • image - The poster image to load
  • width - The width of the video player in pixels
  • height - The height of the player, also in pixels
  • title - The title of the video
  • description - A description of the video

Even though the player library you put on the page was set to a width and height of 480 x 270, you were able to override that at the instance level to render it at 640 by 360.

The above configuration options are very basic, but there are many more available to customize JW Player to your liking.

Option 3: Self-Hosted Player

If you want to host your own player library, you can find both your license key and latest JW Player files in your dashboard's Advanced Account page. Once downloaded, you will need to host jwplayer.js on your own server. When configuring your web page, you will then need to point to your copy of jwplayer.js and also define your self-hosted license key. Here's a code example:

‚Äč<script src="http://mywebsite.com/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>

Note: JW Player 7 now requires a license key. Please make sure to include this on your page if you are self-hosting.

The same steps for embedding and creating a JW Player instance described above apply for self-hosting.

A note on iframes and fullscreen

If you are utilizing the player inside of an iframe, it is important to ensure that your iframe is configured with allowfullscreen. If this is not set, the player will be blocked from expanding to fullscreen.

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here