Easy Youtube & Vimeo Video Embeds With jQuery - VideoBox
File Size: | 5.34 KB |
---|---|
Views Total: | 6692 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.