diff --git a/src/css/components/_text-track.scss b/src/css/components/_text-track.scss index 78a799939b..23ceae4f61 100644 --- a/src/css/components/_text-track.scss +++ b/src/css/components/_text-track.scss @@ -47,8 +47,7 @@ video::-webkit-media-text-track-display { width: 80% !important; } -.video-js .vjs-text-track-display > div { - position: absolute; +.video-js .inset-alternative { top: 0; right: 0; bottom: 0; diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js index f9066f366e..fa2828c63d 100644 --- a/src/js/tracks/text-track-display.js +++ b/src/js/tracks/text-track-display.js @@ -330,6 +330,9 @@ class TextTrackDisplay extends Component { // Clear inline style before getting actual height of textTrackDisplay textTrackDisplay.style = ''; + // Add custom class to textTrackDisplay div child for not inset support styles + textTrackDisplay.firstChild.classList.add('inset-alternative'); + // textrack style updates, this styles are required to be inline tryUpdateStyle(textTrackDisplay, 'position', 'relative'); tryUpdateStyle(textTrackDisplay, 'height', (playerHeight - controlBarHeight) + 'px'); diff --git a/test/unit/tracks/text-track-display.test.js b/test/unit/tracks/text-track-display.test.js index f0aa05d586..88f5a6660f 100644 --- a/test/unit/tracks/text-track-display.test.js +++ b/test/unit/tracks/text-track-display.test.js @@ -575,6 +575,7 @@ if (!Html5.supportsNativeTextTracks()) { assert.ok(player.textTrackDisplay.el_.querySelector('.vjs-text-track-cue').style.left === 'unset', 'Style of left for vjs-text-track-cue element should be unset'); assert.ok(player.textTrackDisplay.el_.querySelector('.vjs-text-track-cue').style.top === '1px', 'Style of top for vjs-text-track-cue element should be 1px'); assert.ok(player.textTrackDisplay.el_.querySelector('.vjs-text-track-cue').style.right === '2px', 'Style of right for vjs-text-track-cue element should be 2px'); + assert.ok(player.textTrackDisplay.el_.firstChild.classList.contains('inset-alternative'), 'Child of textTrackDisplay should contain class of inset-alternative'); player.dispose(); }); }