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

Avatar for Anton Bondarenko
By
LIVE JS
Likethumbsup(3)Dislikesthumbsdown(0)
image_pdf

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.


Subscribe to our newsletter and stay updated.
Loading

Leave a Reply

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

Icecat xml
 November 3, 2019
 October 4, 2018

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 1, 2018
Manual for Icecat CSV Interface

Manual for Icecat CSV Interface

This document describes the manual for Icecat CSV interface (Comma-Separate...
 September 28, 2016

Manual for Open Icecat JSON Product Requests

JSON (JavaScript Object Notation) is an increasingly popular means of trans...
 September 17, 2018
icecat add ons

Icecat Add-ons including Magento, PrestaShop, Shopify, Magento, Google Shopping. NEW: Pimcore

Icecat has a huge list of integration partners, that make it easy for clien...
 August 1, 2020

Manual for Personalized Interface File and Catalog from Icecat

With Icecat, you can generate personalized or customized CSV or Excel files...
 December 4, 2020

Manual: How to Import Free Product Content Into Your Webshop via Icecat

This quick guide will show you how to import free product content from Icec...
 August 8, 2017