Easy Youtube & Vimeo Video Embeds With jQuery - VideoBox

VideoBox is a lightweight jQuery plugin that makes it easier to embed Youtube, Vimeo, or Kaltura videos with custom player parameters into the webpage.

How to use it:

1. To get started, you need to load the jQuery VideoBox plugin after jQuery.

<script src="//code.jquery.com/jquery-VERSION.slim.min.js"></script>
<script src="videobox.js"></script>

2. Create a div placeholder for the video and use data-youtube, data-viemo, or data-kaltura to specify the video URL/ID you want to embed.

<h2>Youtube Video</h2>
<div class="demo" data-youtube="https://www.youtube.com/watch?v=c-5WsFKlKDk"></div>
<h2>Vimeo Video</h2>
<div class="demo" data-vimeo="https://vimeo.com/124077529"></div>
<h2>Kaltura Video</h2>
<div class="demo" data-kaltura="VIDEO ID HERE"></div>

3. Just call the function on the DIV container and done.

$(".demo").videoBox();

4. Default parameters for the Youtube & Vimeo video player.

$(".demo").videoBox({
  width: '640',
  height: '360',
  loop: false,
  autoplay: false,
  byline: true,
  color: "00adef",
  maxheight: '',
  maxwidth: '',
  portrait: true,
  title: ''
});

5. Default parameters for the Kaltura video player.

$(".demo").videoBox({
  width: '640',
  height: '360',
  autoplay: false,
  partner_id: 243342,
  uiconf_id: 12905712,
  entry_id: 0_uka1msg4,
  switchOnResize: false,
  simpleFormat: true,
  displayMode: "sizebitrate",
  inlineScript: false,
  hideSource: null
});

Changelog:

2020-04-02

• Correct bug fix tag_y

2019-11-23

• Update multiple videos

2017-05-26

• Update multiple videos

---

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