YouTube Video Embed

JW Player supports playback of multiple media formats: video files, audio files, YouTube videos, RSS playlists and adaptive streams. This article explains how to embed a YouTube video. Here is an example:

 

 

 

This example uses the official Chromeless player API from YouTube to play a video inline. Several YouTube features, like the preview image and quality selection, are supported. The YouTube watermark cannot be removed though, plus YouTube reserves the right to place advertisements into these videos.

Step 1: Add the library to your <head>

In order to embed media with JW Player, you first have to add the player library to the head of your HTML page (or elsewhere above the actual embed). The player library can be found in your JW Player account and looks like this:

<script src="http://jwpsrv.com/library/YOUR_JW_PLAYER_ACCOUNT_TOKEN.js" ></script>

The JW Player library is Cloud-Hosted by us, making it fast & reliable, secure and always up-to-date with the latest mobile devices and web standards. If you want to host the player library yourself (e.g. if you have an intranet), you should download the Self-Hosted version of JW Player from the account. There's no functional difference between the two.

Don't forget to change the domain to https://ssl.jwpsrv.com if you require secure hosting of the player library.

Step 2: Add the embed code to your <body>

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

<div id="myElement"></div>

<script>
    jwplayer("myElement").setup({
        file: "http://www.youtube.com/watch?v=8CjdLYBDUqw",
        width: 640,
        height: 360
    });
</script>

In this code, the <div> element is used as a container to load JW Player into. It must have a unique id attribute. The setup() block defines which video file to load, as well as the width and height of the player in pixels. The video file is simply the link to the video's page on YouTube.

YouTube playback is currently not fully supported on mobile devices (Android/iOS) with JW Player. The video will play, but the custom interface and JavaScript API will not be available. We expect to resolve this with the release of JW Player version 6.9.

Next Steps

With this basic embed live, you can look into adding customizations like a different player skin, responsive design support or playback of YouTube playlists. See the Customization section for more information.

If things are not yet working out, see our troubleshooting guide for a list of common embedding issues.

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here