fix(FEC-10890): the captions aren't displayed for audio entry and UI …

…doesn't clickable. (#533)

Issue: subtitles container append before poster and located under it on the DOM tree.
Solution: poster, captions, and black screen container blocking user action from UI add pointer-events: none to avoid it.
append captions container after playkit containers.

src/assets/style.css

@@ -40,6 +40,7 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-color: #000;
+  pointer-events: none;
 }
 
 .playkit-subtitles {
@@ -48,13 +49,15 @@
   bottom: 0;
   right: 0;
   left: 0;
+  pointer-events: none;
 }
 
 .playkit-black-cover {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: black;
+  pointer-events: none;
 }
 
 .playkit-size-iframe {

src/player.js

@@ -1595,11 +1595,6 @@ export default class Player extends FakeEventTarget {
    * @returns {void}
    */
   _appendDomElements(): void {
-    // Append playkit-subtitles
-    this._textDisplayEl = Utils.Dom.createElement('div');
-    Utils.Dom.setAttribute(this._textDisplayEl, 'aria-live', 'polite');
-    Utils.Dom.addClassName(this._textDisplayEl, SUBTITLES_CLASS_NAME);
-    Utils.Dom.appendChild(this._el, this._textDisplayEl);
     // Append playkit-black-cover
     this._blackCoverEl = Utils.Dom.createElement('div');
     Utils.Dom.addClassName(this._blackCoverEl, BLACK_COVER_CLASS_NAME);
@@ -1608,6 +1603,11 @@ export default class Player extends FakeEventTarget {
     const el = this._posterManager.getElement();
     Utils.Dom.addClassName(el, POSTER_CLASS_NAME);
     Utils.Dom.appendChild(this._el, el);
+    // Append playkit-subtitles
+    this._textDisplayEl = Utils.Dom.createElement('div');
+    Utils.Dom.setAttribute(this._textDisplayEl, 'aria-live', 'polite');
+    Utils.Dom.addClassName(this._textDisplayEl, SUBTITLES_CLASS_NAME);
+    Utils.Dom.appendChild(this._el, this._textDisplayEl);
   }
 
   /**