How to Set Up

How to add the Yahoo! WebPlayer to your site

Place the Yahoo! WebPlayer code close to the end of your site's HTML code, just above the closing </body> tag.

Example:

<html>
 <head>
  <title>My Website</title>
 </head>
 <body>
 .
 .
 .
 <script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>
 </body>
</html>
Note: preferrably, you would only need to add the Yahoo! WebPlayer to your site once, in a global template that's used by all pages on your site. This will ensure the player shows up on any page on your site with playable content, and you won't need to add it to each individual page.

Table of Contents

How to add the Yahoo! WebPlayer to your site How to detect and play mentions of movie titles How to change the player's theme How to add to popular blogging services Where Yahoo! WebPlayer is not supported Customizing the Yahoo! WebPlayer Minimum requirements and browser support

How to detect and play mentions of movie titles (more to come)

There are two ways to enable the "term recognition" feature on your pages.

The first, and easiest, is to select the checkbox in Step 1 for term recognition as shown on http://webplayer.yahoo.com/get/. This will add the term recognition code to the text box. Copy the entire code from the text box and then paste it into your site's HTML above the closing </body> tag.

The second way to enable the term recognition feature is to add the following parameter to your HTML, just above the Yahoo! WebPlayer code: 
<script type="text/javascript">
    var YWPParams = 
    {
        termDetection: "on" 
    };
</script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js">
</script>

With term recognition enabled, the Yahoo! WebPlayer will look at the text on your page to find mentions of movie titles in "quotes" (e.g. "The Blind Side"). Term detection only happens after the page is published and it may take up to five minutes for the play button to appear upon refreshing the page. We detect a large number of movie titles, but there are some we may miss. We will be adding more movies all the time and will add more categories of terms soon as well (i.e. TV and Celebrities).
Top

How to change the player's theme

The Yahoo! WebPlayer has two different "themes" to choose from. The default theme is black and the alternate theme is silver (more to come).

To change the player theme, select your desired color with the theme chooser in Step 1 on http://webplayer.yahoo.com/get/. You can see the different themes live, as you select the different colors. You'll notice the text box changes to include the code for the silver theme when it's selected. Since black is the default theme, no additional code is added to the text box. Once you've made your selection, simply copy the player code from the text box and paste it into your site's HTML just above the closing </body> tag.

To add the silver theme directly to the player code on your site, simply include the theme parameter as shown below: 
<script type="text/javascript">
    var YWPParams = 
    {
        theme: "silver"  
    };
</script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js">
</script>
Top

How to add to popular blogging services

If you're using a popular blogging platform like Wordpress or Blogger, you can typically edit the site template to add the Yahoo! WebPlayer.

Wordpress

Using WordPress software, go to "Edit Themes" and click on the "Footer" template. Paste the WebPlayer code just above the closing </body> tag and click "update file". This will put the player code in the persistent footer and ensure it shows up for all your blog posts.

Blogger

Using Blogger, go to the "Design" tab and click "Edit HTML". Scroll towards the bottom of the text area to find the closing </body> tag and paste the player code just above it. Click "Save Template" to add the Yahoo! WebPlayer.

Tumblr

Using Tumblr, go to your Dashboard and click the "Customize" link. Next, click "Theme", then click "Enable custom HTML". Scroll down to find the closing </body> tag, paste the player code just above it and then save your changes.
Other blogging services offer similar design options, so just find the place where you can edit the HTML of the site's template (not just the HTML view in the individual blog post editor) and drop our code in there.
Top

Where Yahoo! WebPlayer is not supported

The Yahoo! WebPlayer code is HTML, and you have to add it to the HTML that makes up your page. If you don't have direct access to the HTML, you might be able to ask an administrator.

Facebook

Some sites don't let you access the HTML and therefore you may not be able to add the Yahoo! WebPlayer. For example, Facebook does not allow you to edit raw HTML in most cases, so you cannot currently use the Yahoo! WebPlayer on your Facebook page.

Myspace and Posterous

The HTML inserts JavaScript and some sites do not allow this. Myspace and Posterous allow HTML, but not JavaScript, so you cannot currently use the Yahoo! WebPlayer on these sites.

Wordpress.com (hosted blogs)

Wordpress.com hosted sites (as opposed to self-hosted wordpress installations) do not allow you to access the HTML of your site, so the Yahoo! WebPlayer cannot be added at this time. We hope to have a Yahoo! WebPlayer widget you can add to your wordpress.com site in the future.
Top

Customizing the Yahoo! WebPlayer (for advanced users)

By setting simple parameters, you can change some of the Yahoo! WebPlayer defaults to customize how the player looks and functions on your site.

To add these parameters to your site, place the "YWPParams" JavaScript code just above the Yahoo! WebPlayer code in your HTML. You can include multiple parameters on different rows, separated by commas, within the same YWPParams code as shown below.

<script type="text/javascript">
    var YWPParams = 
    {
        autoplay: true,
        volume: 0.5,
        defaultalbumart: 'http://somedomain.com/path/someimage.gif'
    };
</script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js">
</script>

Playing automatically when the page loads

parameter: autoplay

The autoplay parameter lets you start playing music as soon as your site's visitor lands on your page. Setting autoplay to "true" will start the first song automatically after the player loads. The default value is "false". 
<script type="text/javascript">
    var YWPParams = 
    {
        autoplay: true
    };
</script>

Advancing automatically to the next item

parameter: autoadvance

The autoadvance parameter controls whether or not the player automatically plays the next item in the playlist after the previous item is done playing. Setting autoadvance to "false" will tell the Yahoo! WebPlayer to NOT advance to the next track automatically once the current track finishes playing. The default value is true. 
<script type="text/javascript">
    var YWPParams = 
    {
        autoadvance: false
    };
</script>

Launching the player from links

parameter: playlink

The playlink parameter controls whether or not clicking the link text to the right of the play button plays the item in the player, or simply lets the browser open the link as it would if the Yahoo! WebPlayer wasn't on the page.

Setting playlink to false will mean that clicking on a media link will NOT play it in the Yahoo! WebPlayer. Only the play button will launch the player when playlink is set to false and the browser will decide what happens when the link itself is clicked.

Setting playlink to true will cause the player to launch whenever the link itself is clicked. Both the play button and the link launch the player when playlink is set to true.

The default value for playlink is "media-only", which means the player will launch when a user clicks on links to audio or video, but not for links to "object" pages (e.g. Movie page on Yahoo! Movies). Links to mp3, wma, YouTube videos, etc... will cause the player to launch while a link to a Yahoo! Movie page will open that URL in your browser rather than playing the trailer. 

<script type="text/javascript">
    var YWPParams = 
    {
        playlink: true
    };
</script>

Setting the initial player visibility state when a page loads

parameter: displaystate

The displaystate parameter controls the state in which the player will appear on the page on page load. Setting the displaystate to 0 will load the Yahoo! WebPlayer in its minimized state, which is the small rectangular tab at the bottom left of the page. Setting the displaystate to 1 will load the Yahoo! WebPlayer in maximized state, which will reveal the entire player on page load. The default value is 0. 
<script type="text/javascript">
    var YWPParams = 
    {
        displaystate: 1
    };
</script>

Setting the default volume

parameter: volume

The volume parameter sets the default volume of the Yahoo! WebPlayer on page load. The player expects a floating number between 0.0 and 1.0. The default value is 0.5, or 50%.

Please note, when the volume is changed by a user, its value is saved in a browser cookie to preserve a consistent volume as they navigate from page to page. The volume value specified with this YWPParam will only apply when a user first visits the page. To test the volume parameter, make sure to clear your cookies before visiting the page.
<script type="text/javascript">
    var YWPParams = 
    {
        volume: 0.7
    };
</script>

Adding custom default album art

parameter: defaultalbumart

The defaultalbumart parameter allows you to set your own image inside the Yahoo! WebPlayer that appears while audio is playing. This image appears to the right of the volume control, next to the item's title for all items in your playlist. A placeholder image will appear by default and no image will appear while video is playing.

We recommend 205px x 205px for best appearance.

<script type="text/javascript">
    var YWPParams = 
    {
        defaultalbumart: 'http://somedomain.com/path/someimage.gif'
    };
</script>

Ignoring links to YouTube pages

parameter: linkconfig

The linkConfig parameter allows you to specify how the player handles different types of links. This parameter currently allows you to either detect and add play buttons to YouTube page links or ignore links to YouTube pages. We'll be adding additional configuration options in the future. The sample code below shows how to configure the Yahoo! WebPlayer to ignore YouTube links so they don't show play buttons.
<script type="text/javascript">
    var YWPParams = 
    {
        linkConfig: 
        {
            youtube: 'ignore' 
        }
    };
</script>

Disabling wmode override for embedded YouTube videos

parameter: wmodeoverride

To prevent itself from appearing behind embedded YouTube videos, the Yahoo! WebPlayer changes the wmode setting of these embedded videos. The wmodeoverride parameter allows you to turn this feature on or off. Set wmodeoverride to 'true' to turn this feature on and set the parameter to 'false' to turn it off. The default setting is 'true'.
<script type="text/javascript">
    var YWPParams = 
    {
        wmodeoverride: false
    };
</script>

Controlling link detection and term recognition

parameter: parse

The parse parameter controls whether or not the Yahoo! WebPlayer scans the page for playable items when the page loads. Setting parse to "false" will tell the player to NOT scan the page on page load. This is useful if you want to use the Yahoo! WebPlayer API to control which items get loaded into the playlist and also when they are added. The default value is true. 
<script type="text/javascript">
    var YWPParams = 
    {
        parse: false
    };
</script>
Top

Minimum requirements

We continually strive to make the player work just about anywhere, but we have some minimum requirements:
  • The Yahoo! WebPlayer relies on JavaScript to work. If your website doesn't allow JavaScript, or if JavaScript is disabled in a user's browser, the Yahoo! WebPlayer will not appear.
  • The Yahoo! WebPlayer currently uses some Flash, and therefore the user must have Flash installed for the player to work. We are working to remove this limitation sometime soon.

Browser support

The Yahoo! WebPlayer supports the following browsers:

  • Internet Explorer 6 and above

  • Firefox 3 and above

  • Google Chrome (Latest stable version)

  • Safari 5 and above

OK. Now that you got the Yahoo! WebPlayer on your page and configured to your liking, check out our "How to use" section to learn how to add video and audio to your site.

Top