From 2c888efb96605e1c9f377dcdbe39edc810c3fc29 Mon Sep 17 00:00:00 2001
From: lianbenjamin <79077248+lianbenjamin@users.noreply.github.com>
Date: Tue, 25 May 2021 15:12:38 +0300
Subject: [PATCH] fix(FEC-11271):displaying .VTT captions not working properly
 for below video layout (#4228)

Issue:
when setting the captions layout to "below video" and playing .vtt captions- the captions are placed on the video as "on top" layout, instead of inside the container below the video.

Solution:
forcing inset=0 when layout=below video. In addition, added position=relative to parent class so captions will be placed according to the caption container and not to the video holder.

Solves FEC-11271
---
 modules/KalturaSupport/resources/mw.ClosedCaptions.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/modules/KalturaSupport/resources/mw.ClosedCaptions.js b/modules/KalturaSupport/resources/mw.ClosedCaptions.js
index de8dbf51e5..28066e5260 100644
--- a/modules/KalturaSupport/resources/mw.ClosedCaptions.js
+++ b/modules/KalturaSupport/resources/mw.ClosedCaptions.js
@@ -775,8 +775,13 @@
 					.css('pointer-events', 'auto')
 					.css('z-index', '3')
 					.css('pointer-events', 'none')
+					.css('position', 'relative')
 				);
 
+			if (this.getConfig('layout') === 'below') {
+				$(caption.content).css('inset', '0px');
+			}
+
 			this.displayTextTarget($textTarget);
 
 			var captionDiv = $('.caption div');