Autoplay Youtube Videos In Bootstrap Modal - jQuery YoutubeModal

Just another jQuery plugin which enables you to open and autoplay Youtube videos in a popup window using Bootstrap modal component. Supports both Bootstrap 3 and Bootstrap 4.

See also:

• Youtube Video Modal with jQuery and Bootstrap 3 - YTModal

How to use it:

1. Load the jQuery YoutubeModal plugin's script in your Bootstrap project.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="bootstrap.youtubemodal.js"></script>

2. Create normal links pointing to your Youtube Videos.

<a class="youtube" href="https://www.youtube.com/watch?v=oX6I6vs1EFs&t=196s">Morning Yoga</a>

3. You're also allowed to attach your Youtube videos to any DOM elements using 'rel' attribute as these:

<button class="youtube" rel="VIDEO-ID-HERE">Play</button>
<img class="youtube" rel="VIDEO-ID-HERE" src="poster.jpg">

4. Initialize the plugin and done.

$(".youtube").YouTubeModal();

5. Config the modal & Youtube video player.

$(".youtube").YouTubeModal({

  // video ID
  youtubeId: '',

  // modal title
  title: '',

  // use video's title
  useYouTubeTitle: true,

  // default ID attribute
  idAttribute: 'rel',

  // default CSS class
  cssClass: 'YouTubeModal',

  // width/height
  width: 640,
  height: 480,

  // autohide
  autohide: 2,

  // autoplay
  // 0 = disable
  autoplay: 1,

  // color
  color: 'red',

  // shows controls
  // 0 = disable
  controls: 1,

  // fullscreen button
  // 1 = enable
  fs: 1,

  // infinite loop
  // 1 = enable
  loop: 0,

  // show video information
  // 1 = enable
  showinfo: 0,

  // player theme
  theme: 'light'

});

---

This awesome jQuery plugin is developed by 0x0soir. For more Advanced Usages, please check the demo page or visit the official website.