How to Create a Button that Opens Video in a Modal Window

Recently, our Icecat Live JavaScript interface was updated with two new functions: play() and stop(). These functions allow Icecat Live users to create a custom video play button that will open a video in a new modal window, i.e., in a graphical control element subordinate to an application’s main window. Below is an example of how you could implement this functionality on your web app.

Step 1. Add a modal window

Firstly, add a <div> element with id=”modal” to your page. This will be the container for the modal window with the video. See the example below:

<div id="modal">
        <div class="modal-wrapper">
            <span id='close'>&times;</span>
            <div id='IcecatLive'></div>
        </div>
</div>

Step 2. Assign a Play button

Secondly, set the id=’myPlayButton’ to the element of your page that should open the modal window. In our example, the element type is <button>, but you can apply it to any other element on your page. For example, an image with a thumbnail of the video.

<button id='myPlayButton'>Play</button>

Step 3. Add JavaScript files

Next, insert the following line into the <head> element of your page:

<script src='<https://live.icecat.biz/js/live-current-2.js'> async></script>

Additionally, insert the following line just before the end of the <body> element of your page:

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

Step 4. Copy custom.js into your project and modify shopname and icecat_id.

Finally, copy custom.js into your project.

IMPORTANT: replace the shopname and icecat_id values with your own.

The most important functions in this example are: window.IcecatLive.trigger(‘videos:play’); and window.IcecatLive.trigger(‘videos:stop’), which start and stop the playing of the video.

Result

The four steps above provide the basic configuration. As a result, the video below is shown. Furthermore, experienced developers can rename elements and modify styles according to the code style and visual requirements of their projects.

Full code example

index.html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Button API usage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src='https://live.icecat.biz/js/live-current-2.js' async></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class='wrapper'>
    <div id="modal">
        <div class="modal-wrapper">
            <span id='close'>&times;</span>
            <div id='IcecatLive'></div>
        </div>
    </div>
    <div>
        <button id='myPlayButton'>Play</button>
    </div>
</div>
<script src="custom.js"></script>
</body>
</html>

custom.js

window.addEventListener('liveload', function () {
  window.IcecatLive.getDatasheet({'videos': '#IcecatLive'}, {
 'shopname': 'openIcecat-live',
 'icecat_id': '35598021'
  }, 'EN');
})


window.onload = function () {
  const playButton = document.querySelector('#myPlayButton')
  const closeButton = document.querySelector('#close')
  const modal = document.querySelector('#modal')

  playButton.addEventListener('click', function () {
 if (window.IcecatLive) {
   openModal()
   window.IcecatLive.trigger('videos:play');
 }
  });
  closeButton.addEventListener('click', function () {
 if (window.IcecatLive) {
   closeModal()
   window.IcecatLive.trigger('videos:stop');
 }
  })

  function closeModal() {
 modal.style.display = 'none';
  }

  function openModal() {
 modal.style.display = 'block';
  }
}

styles.css

.wrapper {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 100px auto 25px;
    background-color: transparent;
    text-align: center;
}

button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

#modal {
     display: none; /* Hidden by default */     position: fixed; /* Stay in place */     z-index: 1; /* Sit on top */     padding-top: 100px; /* Location of the box */     left: 0;
     top: 0;
     width: 100%; /* Full width */     height: 100%; /* Full height */     overflow: auto; /* Enable scroll if needed */     background-color: rgb(0,0,0); /* Fallback color */     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}
#modal .modal-wrapper{
    margin: auto;
    width: 80%;
    position: relative;
}
#close{
    color: #fff;
    position: absolute;
    right: 20px;
    font-size: 40px;
    cursor: pointer;
    font-weight: bold;
    z-index: 1;
}
#close:hover,
#close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/*  Override IcecatLive css*/#videoTab{
    display: none;
}

Here you can download the working example to try it.

Download example

Read further: Manuals, News, JavaScript, manuals, video