Bootstrap Youtube Popup Player Plugin

DEMO | Download

Requirements:

  • You will need Bootstrap v3.0.0 or above.
  • Bootstrap CSS and JavaScript (complete or modal)
  • jQuery Library which is required by Bootstrap.
  • Bootstrap Youtube Popup Player Plugin Library which you can get from GitHub.
  • If you need multiple videos in the same popup, use the playlist version.

Usage:

  • Add normal YouTube links on your page:
    <a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU">Link title</a>
    <a class="youtube" href="http://www.youtube.com/embed/4eYSpIz2FjU">Link Title</a>
    <a class="youtube" href="http://youtu.be/4eYSpIz2FjU"><img src="..." /></a>
  • OR, use <button> element with YouTube id in rel attribute:
    <button class="youtube" rel="4eYSpIz2FjU">Click me</button>
  • OR, use <img> element with YouTube id in rel attribute:
    <img class="youtube" rel="4eYSpIz2FjU" src="..." />
  • OR, use <img> element with YouTube id in rel attribute and thumbnail from YouTube:
    <img class="youtube" rel="4eYSpIz2FjU" src="http://img.youtube.com/vi/4eYSpIz2FjU/1.jpg" />
  • And finally, initialize the Plugin on page load:
    <script type="text/javascript">
    	$(function () {
    		$(".youtube").YouTubeModal({autoplay:0, width:640, height:480});
    	});
    </script>
  • Configure the plugin using options listed below.

Configuration Options:

  • youtubeId: Use it to override the YouTube Id using JavaScript.
  • title: Override the title text. To get the title from YouTube, leave this blank.
  • useYouTubeTitle: (default: true) Gets the video title from YouTube. This option will not work if the title is overridden using the title option above.
  • idAttribute: (default: rel) Attribute containing the YouTube Id.
  • cssClass: (default: empty string) Attribute containing the CSS class to be assigned to the popup div.
  • width: (default: 640) Width of the YouTube player.
  • height: (default: 480) Height of the YouTube player.
  • Rest of the options are used to configure the YouTube player. For more help on these options, please refer YouTube Embedded Player Parameters on YouTube API website.