How to Play YouTube Videos With the JW Player
By Nick Peers
If you want to enable your visitors to play YouTube videos on your website, you need an embeddable media player that supports HTML5 and Flash. JW Player supports both HTML5 and Flash and also supports all major Web browsers. The player also supports mobile platforms, so your mobile visitors can play the videos as well. To play videos on a Web page, you need the ability to edit the code of the page.
Transfer the JW Player files you downloaded from the JW Player website to your own website. You can transfer the player files to a new folder -- Scripts for example.
Open the Web page where you want to insert the player using the HTML editor of your choice. You can even open the page in Notepad.
Insert the following code between the "<head>" and "</head>" tags, replacing "Scripts" with the name of the folder where you stored the player files, to initialize the player's JavaScript script:
<script type="text/javascript" src="/Scripts/jwplayer.js" ></script>
If you purchased the Pro, Premium or Ads edition of JW Player, you must provide your player license key by also inserting the following line and replacing "Your_JW_Player_Key" with your license key:
<script type="text/javascript">jwplayer.key="Your_JW_Player_Key";</script>
Select the position where you want the JW player object to appear by inserting the following code anywhere between the "<body>" and "</body>" tags and replacing "myJWPlayer" with a unique "div" ID:
<div id="myJWPlayer">Player is loading...</div>
Enter the following code below the "<div>" line to create the video player object and change its appearance and parameters:
<script type="text/javascript"> jwplayer("myJWPlayer").setup({ file: "YouTube_URL", height: X, image: "/uploads/cover.jpg", width: Y }); </script>
Replace "YouTube_URL" with the URL of the YouTube video you want to play. Replace "X" with the desired height and "Y" with the desired width -- in pixels -- of the JW Player element. Replace "/uploads/cover.jpg" with the path to the image you want to display before playback is started.
Save the Web page and test the player by navigating to the page using a Web browser. Click the "Play" button to start playing the YouTube video.
Tips
You can insert additional parameters and options blocks into the player code to alter the layout and functionality of the player.
Install one of the eight professional PNG skins (link in Resources) to change the appearance of the player.
Writer Bio
Nick Peers has been writing technology-related articles since 2003. His articles have appeared in dozens of technical publications, including MSN UK, CNET, BBC Who Do You Think You Are, LifeHacker UK and TechRadar. He holds a Masters in information technology degree from the University of East London.