Removed logic related to starting the ad by clicking/ tapping the advertisement container. Ad is started by plyr play method.

src/js/plugins/ads.js

@@ -1,23 +1,5 @@
 import utils from '../utils';
 
-// Events are different on various devices. We set the correct events, based on userAgent.
-const getStartEvents = () => {
-    let events = ['click'];
-
-    // TODO: Detecting touch is tricky, we should look at other ways?
-    // For mobile users the start event will be one of
-    // touchstart, touchend and touchmove.
-    if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
-        events = [
-            'touchstart',
-            'touchend',
-            'touchmove',
-        ];
-    }
-
-    return events;
-};
-
 class Ads {
     constructor(player) {
         this.player = player;
@@ -41,7 +23,6 @@ class Ads {
 
     ready() {
         this.time = Date.now();
-        this.startEvents = getStartEvents();
         this.adsContainer = null;
         this.adDisplayContainer = null;
         this.adsManager = null;
@@ -106,24 +87,6 @@ class Ads {
         // that will house the ads.
         this.adDisplayContainer = new google.ima.AdDisplayContainer(this.adsContainer);
 
-        const adsDisplayElement = this.adsContainer.firstChild;
-
-        // The AdDisplayContainer call from google IMA sets the style attribute
-        // by default. We remove the inline style and set it through the stylesheet.
-        adsDisplayElement.removeAttribute('style');
-
-        // Set class name on the adDisplayContainer element.
-        adsDisplayElement.setAttribute('class', this.player.config.classNames.ads);
-
-        // Play ads when clicked. Wait until the adsManager and adsLoader
-        // are both resolved.
-        Promise.all([
-            this.adsManagerPromise,
-            this.adsLoaderPromise,
-        ]).then(() => {
-            this.setOnClickHandler(adsDisplayElement, this.play);
-        });
-
         // Request video ads to be pre-loaded.
         this.requestAds();
     }
@@ -462,7 +425,6 @@ class Ads {
 
         // Hide our ad container.
         this.adsContainer.style.display = 'none';
-        this.adsContainer.style.zIndex = '1';
 
         // Ad is stopped.
         this.playing = false;
@@ -481,7 +443,6 @@ class Ads {
 
         // Show our ad container.
         this.adsContainer.style.display = 'block';
-        this.adsContainer.style.zIndex = '3';
 
         // Ad is playing.
         this.playing = true;
@@ -546,27 +507,6 @@ class Ads {
         }
     }
 
-    /**
-     * Set start event listener on a DOM element and triggers the
-     * callback when clicked.
-     * @param {element} element - The element on which to set the listener
-     * @param {function} callback - The callback which will be invoked once triggered.
-     */
-    setOnClickHandler(element, callback) {
-        for (let i = 0; i < this.startEvents.length; i += 1) {
-            const startEvent = this.startEvents[i];
-            element.addEventListener(
-                startEvent,
-                event => {
-                    if ((event.type === 'touchend' && startEvent === 'touchend') || event.type === 'click') {
-                        callback.call(this);
-                    }
-                },
-                { once: true },
-            );
-        }
-    }
-
     /**
      * Add event listeners
      * @param {string} event - Event type

src/sass/plugins/ads.scss

@@ -3,13 +3,14 @@
 // ==========================================================================
 
 .plyr__ads {
+    display: none; // Hide initially.
     bottom: 0;
     cursor: pointer;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 1;
+    z-index: 3; // Above the controls.
 
     video {
         left: 0;