jQuery responsive youtube auto playlist player

jQuery responsive youtube auto playlist player documentation

A very simple way to show a youtube playlist with jquery and fully responsive player. You can choose the following playlists. A regulair playlist (the default), user_uploads (channel), a custom playlist or make a list with search keywords

Just add a very small js ,css file and an empty div with an ID or class to your template and fill in a few variables in the $(document).ready(function() and youre done.

For a demo visit this page and resize your browser. You will see the responsive effect.

DEMO

Item Support

Thank you for purchasing the Responsive youtube auto playlist player. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Markup Markup customization and highlights

General Markup

Here is the general structure. In this example I use html5 but it can also be used with any other DOCTYPE

<!DOCTYPE html>
<html>
<head>
<title>Your site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./css/youtube-responsive.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.youtube-responsive.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    <!-- Example first player -->
	$('#youtubevideos').youTubePlaylistResponsive({
	  listtype : 'search',
          listvalue : 'hd',
          theme: true,
          center: true,
          maxwidth: '650px'
          lightsout: true
	});

    <!-- Example second player -->
	$('#youtubevideos2').youTubePlaylistResponsive({
          listtype : 'search',
          listvalue : 'jazz guitar',
          showInfo: false,
          autoHide: true
	});

    <!-- Example third player -->
	$('#youtubevideos3').youTubePlaylistResponsive({
          listtype : 'custom',
          listvalue : 'gFftC9O9EZ0,-Fv-iUhLcys,Vv2YXjCWg1A,eIa7YxlHq3A'
	});

});
</script>

Html tag

Just add one of these tag's anywhere on your page where you want the youtube player

These ID names are just examples

	<!-- First player -->
	<div id="youtubevideos"></div>
	<!-- END  -->

	<!-- Second player -->
	<div id="youtubevideos2"></div>
	<!-- END  -->

	<!-- third player -->
	<div id="youtubevideos3"></div>
	<!-- END  -->

Use for responsive website

Be sure you set up your template with the right responsive tags

/* Example */
@media only screen and (max-width: 800px) {
   #container {
   width: 100%;
   }
}

Styles

Style sheet

Here the stylesheet for the youtube player

File Name Description
youtube-responsive.css The css file you need to include in your website

JavaScript

JavaScript Files

The js needed for the youtube player

Tag Description
jquery.js jQuery is a Javascript library that greatly reduces the amount of code that you must write.
jquery.youtube-responsive.min.js The js code for the responsive youtube player

Customize the responsive youtube player

Here all all the options available for the responsive youtube player

/* --- @ responsive youtube options ---*/
$('#youtubevideos').youTubePlaylistResponsive({
	//listType playlist, user_uploads, custom or search (the default)
	listtype: 'search',
    listvalue: 'hd nature',
	autoplay: false,
	showrelated: false,
	showinfo: true,
	autohide: false,
	theme: false,
	modestbranding: true,
	iv_load_policy: false,
	allowfullscreen: true,
	controls: true,
	hd: false,
	maxwidth: '',
	center: false,
	lightsout: true
});

Options declared

Options declared

Here's a brief information about the js options for the responsive youtube player

  • listtype string. Choose between playlist, user_uploads, custom or search (max. 20 video's).
    Default: search
  • listvalue string. Here the playlist ID, channel (user_uploads) name, ID's seperated by comma's (custom) or search for keywords.
    Default: hd nature
  • autoplay boolean. If set to true the player will play onload
    Default: false
  • showrelated boolean. Show related movies at the end of the movie
    Default: false
  • showinfo boolean. Display thumbnail images for the videos in the playlist
    Default: false
  • autohide boolean. This parameter indicates whether the video controls will automatically hide after a video begins playing. The default behavior is for the video progress bar to fade out while the player controls (play button, volume control, etc.) remain visible.
    Default: true
  • theme boolean. Set the color scheme foer the player. true is white ad false is black
    Default: false
  • modestbranding boolean. Set to false to show the youtube logo in the player controll bar
    Default: true
  • iv_load_policy boolean. Setting to true will cause video annotations to be shown by default.
    Default: false
  • allowfullscreen boolean. Show the fullscreen button.
    Default: true
  • controls boolean. This parameter indicates whether the video player controls will display.
    Default: true
  • hd boolean. Play the video's in HD at startup (not recommended).
    Default: false
  • maxwidthstring. Here you can set the maxwidth in % or px.
    Default: 100%
  • centerboolean. If maxwidth is set you can optional center the player.
    Default: false
  • Lights out boolean. Mouseover the video turns out the light effect (background fading).
    Default: true

Credits Files

I've used the following files as listed.

JavaScript

  1. jQuery

Once again, thank you so much for purchasing this app. As I said at the beginning, I'd be glad to help you if you have any questions relating to this app. No guarantees, but I'll do my best to assist.

Ceasar