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

Avatar for Anton Bondarenko
By
LIVE JS

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Icecat xml

Open Catalog Interface (OCI): Manual for Open Icecat XML and Full Icecat XML

This document describes the Icecat XML method of Icecat's Open Catalog Inte...
 November 3, 2019
Manual

Manual for Icecat Live: Real-Time Product Data in Your App

Icecat Live is a (free) service that enables you to insert real-time produc...
 June 10, 2022
Manual for Icecat CSV Interface

Manual for Icecat CSV Interface

This document describes the manual for Icecat CSV interface (Comma-Separate...
 September 28, 2016
 October 4, 2018
LIVE JS

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

Recently, our Icecat Live JavaScript interface was updated with two new fun...
 November 3, 2021
Addons plugins

Icecat Add-Ons Overview. NEW: Red Technology

Icecat has a huge list of integration partners, making it easy for clients ...
 October 27, 2023
Manual

Manual for Open Icecat JSON Product Requests

JSON (JavaScript Object Notation) is an increasingly popular means of trans...
 September 17, 2018
 January 20, 2020
New Standard video thumbnail

Autheos video acquisition completed

July 21, Icecat and Autheos jointly a...
 September 7, 2021
Manual

Manual Personalized Interface File and Catalog from Icecat

With Icecat, you can generate personalized or customized CSV or Excel files...
 May 3, 2022