JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="showme"> Show dropdown
  <select id="movies-container">
    <option value="" selected disabled hidden>Choose here</option>
  </select>
</div>
<video id="show-video" style="display:none;"></video>

CSS

#movies-container {
  position: absolute;
  display: none;
}

.showme {
  height: 100px;
  width: 150px;
  color: white;
  background: red;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
}

#movies-container.show {
  display: flex;
}

JavaScript

$(function() {
  var movies = [{
    "title": "travel",
    "left": 201,
    "top": 209,
    "movieid": "10",
    "movie_url": "http://techslides.com/demos/sample-videos/small.mp4",
    "buttons": [{
      "left": 81,
      "top": 51,
      "start_time": 1,
      "end_time": 2,
      "buttonid": "10_1",
      "btn_url": "http://techslides.com/demos/sample-videos/small.mp4"
    }]
  }];

  function PopulateDropDownList() {
    var movieContainerID = $("#movies-container");

    //Add the Options to the DropDownList.
    $.each(movies, function(k, v) {
      console.log(v);
      var option = $("<option>", {
        value: v.movieid
      }).html(v.title).appendTo(movieContainerID);
    });

    movieContainerID.change(function() {
      var movieid = $("option:selected").val();
      var movie = getMovie(movieid);
      $("#show-video").attr({
        src: movie.movie_url,
        controls: "controls",
        type: "video/mp4"
      }).show();
    });
  }

  function getMovie(id) {
    var m = false;
    $.each(movies, function(k, v) {
      if (v.movieid == id) {
        m = v;
      }
    });
    return m;
  }

  $('.showme').on('click', function() {
    $('#movies-container').addClass('show');
    PopulateDropDownList();
  });
});