JSFiddle - React, Tailwind, and code Playground

by renevilla23

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container row">
    <div id="video"></div>
</div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="modal-body" id="video-modal"></div>
      </div>
    
    </div>
</div>

CSS

.row{
    width: 100%;
}
.video{
    width:25%;
    float: left;
}
.video img{
    height: 50px;
    margin: 10px 20px;
}
video{
    width:100%;
}

JavaScript

var dataCollection = {
  'videoData': [
    {
      'id'      : 0,
      'title'   : 'Badminton',
      'company' : 'Pepto Bismol',
      'gifLink' : 'http://reneinla.com/kris/gifs/BadmintonPeptoBismolCommercial.gif',
      'srcMp4'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.m4v',
      'srcWebm' : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.webm',
      'srcOgv'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.ogv',
      'poster'  : 'http://reneinla.com/kris/videos/BadmintonPeptoBismolCommercial.jpg'
    },
    {
      'id'      : 1,
      'title'   : 'Home Brewer',
      'company' : 'Buffalo Wild Wings',
      'gifLink' : 'http://reneinla.com/kris/gifs/BuffaloWildWingsHomeBrewer.gif',
      'srcMp4'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.m4v',
      'srcWebm' : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.webm',
      'srcOgv'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.ogv',
      'poster'  : 'http://reneinla.com/kris/videos/BuffaloWildWingsHomeBrewer.jpg'
    },
    {
      'id'      : 2,
      'title'   : 'Directly to Fabulous',
      'company' : 'California Lottery',
      'gifLink' : 'http://reneinla.com/kris/gifs/CaliforniaLottoMonopolyGoDirectlytoFabulous.gif',
      'srcMp4'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.m4v',
      'srcWebm' : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.webm',
      'srcOgv'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.ogv',
      'poster'  : 'http://reneinla.com/kris/videos/CaliforniaLottoMonopolyGoDirectlytoFabulous.jpg'
    }
  ]
};

    var videos = $('#video');
    var modalContent = $('#video-modal');
    var playpause = document.querySelector('video');
    var stop = document.querySelector('#myModal,.close');

    var appendVideo = function(videoObj) {
        var poster = videoObj.poster;
    ...