Embed Multiple Youtube Videos Into The Page With A Single Call - ytmultiple

ytmultiple is a jQuery plugin which helps you embed multiple Youtube video players into your HTML page with just a single JS call.

How to use it:

1. To use the plugin, insert the latest jQuery library and YouTube Player API into the HTML page.

<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" 
        crossorigin="anonymous">
</script>
<script src="https://www.youtube.com/player_api"></script>

2. Download and insert the jQuery ytmultiple plugin after jQuery.

<script src="js/ytmultiple.js"></script>

3. Create a set of containers in which you want to insert the Youtube videos.

<div class="yt_wrap">
  <div id="player1" class="yt_box"></div>
</div>

<div class="yt_wrap">
  <div id="player2" class="yt_box"></div>
</div>

<div class="yt_wrap">
  <div id="player3" class="yt_box"></div>
</div>

...

4. Initialize the plugin and specify an array of objects containing container IDs and Youtube video IDs.

var ytPlayList = [{
      id: "player1", 
      VideoId: "jWRk5eV7eOU"
    },{
      id: "player2", 
      VideoId: "K9_kVFDJT2E"
    },{
      id: "player3", 
      VideoId: "flWgt7RDNbk"
}];

5. Play/pause all the Youtube videos.

ytTogglePlay();

---

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