Embedding multiple Ooyala V4 player dynamically on page

Question

I have a scenario where I need to implement multiple Ooyala V4 player on a page with dynamic parameters.

It should be like this

<div class="video" data-video-id="vid1" data-player-id="player1" data-pcode="pcode1">
  <div id="container1" style="width:100%; height: auto;"></div>

  <script>
    var vid = $('.video').data('video-id');
    var pid = $('.video').data('player-id');
    var pco = $('.video').data('pcode');

    var playerParam = {
      'pcode': pco,
      'playerBrandingId': pid,
      'skin': {
        'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'
      }
    };
    OO.ready(function() {
      window.pp = OO.Player.create('container1', vid, playerParam);
    });

  </script>
</div>

<div class="video" data-video-id="vid2" data-player-id="player2" data-pcode="pcode2">
  <div id="container2" style="width:100%; height: auto;"></div>

  <script>
    var vid = $('.video').data('video-id');
    var pid = $('.video').data('player-id');
    var pco = $('.video').data('pcode');

    var playerParam = {
      'pcode': pco,
      'playerBrandingId': pid,
      'skin': {
        'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'
      }
    };
    OO.ready(function() {
      window.pp = OO.Player.create('container2', vid, playerParam);
    });

  </script>
</div>

<div class="video" data-video-id="vid3" data-player-id="player3" data-pcode="pcode3">
  <div id="container3" style="width:100%; height: auto;"></div>

  <script>
    var vid = $('.video').data('video-id');
    var pid = $('.video').data('player-id');
    var pco = $('.video').data('pcode');

    var playerParam = {
      'pcode': pco,
      'playerBrandingId': pid,
      'skin': {
        'config': '//player.ooyala.com/static/v4/stable/latest/skin-plugin/skin.json'
      }
    };
    OO.ready(function() {
      window.pp = OO.Player.create('container3', vid, playerParam);
    });

  </script>
</div>

Here data-video-id, data-player-id, data-pcode and the id="container1" will be unique for every div and it should pass to every individual scripts inside div.

I am not getting any idea to achieve this. Can anyone please help me here?

Thanks in advance! Cheers!