jQuery responsive youtube auto playlist player for Wordpress 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), make a list with search keywords or make your own list all with the use of shortcodes

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

DEMO

Item Support

Thank you for purchasing this 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!


Shortcode explanations

  • listtype="search" string. playlist, user_uploads, search (the default) or custom.
    Default: search
  • listvalue string. Here the playlist ID, channel (user_uploads) name ,search keywords (max 20) or fill in ID's seperated by comma..
    Default: hd nature
  • autoplay boolean. If set to true the player will play onload. (not recommended)
    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. the color scheme for the player. true is white and 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
  • rightboolean. If maxwidth is set you can optional float the player to the right. Then set the maxwidth in % not in px.
    Default: false
  • leftboolean. If maxwidth is set you can optional float the player to the left. Then set the maxwidth in % not in px.
    Default: false

Youtube Responsive

shortcode examples


Ex: [youtuberesponsive listvalue="hd nature" theme="true"] - Search HD nature with white color

Ex: [youtuberesponsive listtype="user_uploads" listvalue="rpoland" autohide="true" showinfo="false" theme="false"] - Channel user rpoland, hide video controls, hide thumbs and black skin (default)

Ex: [youtuberesponsive listtype="playlist" listvalue="PL92D03D9BED0E5588" maxwidth="500px" center="true"] - Playlist, maxwidth 500px and centered

Ex: [youtuberesponsive listtype="playlist" listvalue="PL92D03D9BED0E5588" maxwidth="40%" right="true"] - Playlist, maxwidth 40% and float to the right

Ex: [youtuberesponsive listtype="custom" listvalue="gFftC9O9EZ0,-Fv-iUhLcys,Vv2YXjCWg1A,eIa7YxlHq3A"] - Custom Playlist with ID's, comma seperated

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 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 minified

Customize the css responsive youtube player

Open youtube-responsive.css and change the background colors or shadows.
Everything is well documented

I've used the following files as listed.

JavaScript

  1. jQuery

NB. Mobile phone's and tablets are showing a different view of the player. The player depends on any updates from youtube for this issue


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