Adding Youtube Playlist Using JW Player to Blogger

I have got a number of questions from www.cambohelpblogger.blogspot.com's visitors. Those questions are asking about "how to add youtube video playlist to blogger"; I come this time to show you a very simple way and perfectly working on most Blogger's template. This tutorial is abou "how to add youtube playlist using with JW Player". Jw Player is the most popular media player online providing a good solution to a publisher whose job is about blogging.

Adding Jw Player to blogger

1. Adding Script to Blogger Template

With this tutorial, it very simple and easy way for somebody who is about video blogging.

Now, let see the following step:

1. Go to Blogger Dashboard >> Template >> Edit Template

2. Click anywhere inside the code area >> press "Ctrl + F" on your keyboard to open the search box

3. Inside the search box past this </head> tags and hit Enter to find it.

4. Just above the </head> past the following code.

<script src='http://jwpsrv.com/library/o3BeDjJfEeKT8yIACp8kUw.js'/>
<script src='https://dl.dropboxusercontent.com/s/1sbu88nx2qddejf/jw6-touchscroll.min.js'/>
<script src='http://www.dev.powered-by-haiku.co.uk/jw-html-config/jwplayer/v6/jwplayer.js' type='text/javascript'/>
<script src='http://www.dev.powered-by-haiku.co.uk/jw-html-config/jwplayer/jwplayer-html-config.min.js' type='text/javascript'/>
<script src='http://p.jwpcdn.com/6/5/jwplayer.js?ver=3.8.1' type='text/javascript'/>
<script src='http://powered-by-haiku.co.uk/wp-includes/js/jquery/jquery.js?ver=1.10.2' type='text/javascript'/>
<script src='http://powered-by-haiku.co.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1' type='text/javascript'/>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

5. Save Template

2. Adding JavaSript to specific Post/Page

Now you add the following script to the specific post/page you want to:

1. Go to blogger dashboard and create a new post/page for your video

2. Tab to the"HTML" area and past the following script:

<div id="playerSpuurExoMyae">
</div>
<script type="text/javascript">
jwplayer('playerSpuurExoMyae').setup({ playlist: [

{"file": "https://www.youtube.com/watch?v=76yuTxhp-hQ","title": "249.Short Question and Answer [Ven San Sochea]","description": "","image": "http://i.ytimg.com/vi/76yuTxhp-hQ/0.jpg"},
{"file": "https://www.youtube.com/watch?v=_AUqp0fLyVE","title": "244.Short Question and Answer [Ven San Sochea] ","description": "","image": "http://i.ytimg.com/vi/FcLXb0yb3Sw/0.jpg"},


],
listbar: {position: 'bottom',size: 200},
width: '100%',
aspectratio: '16:9',
skin: 'beelden',
});var jwp = jwplayer(playerSpuurExoMyae);
jwtube.patch(jwp);
</script>

Note: 1- You just change youtube video ID in the red color, Video ID is the last character of youtube URL like (v=XXXXXX)

          2- For the green color add the same video ID for the thumbnail.

          3- If you want to change the position of your video list just choose one of this ( 'right', 'left', 'bottom')

          4-If you want to add more videos on a list, just copy the hold script where it say "file":xxxx.               Make sure you add video ID to both side "at the red color and green color".

I hope that this tutorail will fully help you. If you still have any questions, please feel free to contact me or write your comment. Don't foreget to subscribe and like facebook page to recieve every post on this site. 

Enjoyed this post?
Be sure to subscribe to get regular updates delivered to your email inbox, for free.