diff --git a/src/HTMLVideo/HTMLVideo.js b/src/HTMLVideo/HTMLVideo.js
index 2ee6a79..b05050d 100644
--- a/src/HTMLVideo/HTMLVideo.js
+++ b/src/HTMLVideo/HTMLVideo.js
@@ -449,7 +449,19 @@ function HTMLVideo(options) {
case 'subtitlesOutlineColor': {
if (typeof propValue === 'string') {
try {
- styleElement.sheet.cssRules[0].style.textShadow = Color(propValue).rgb().string() + ' 1px 1px 0.1em';
+ var color = Color(propValue).rgb().string();
+ var shadows = [
+ color + ' 2px 0px 0',
+ color + ' -2px 0px 0',
+ color + ' 0px 2px 0',
+ color + ' 0px -2px 0',
+ color + ' 2px 2px 0',
+ color + ' -2px -2px 0',
+ color + ' 2px -2px 0',
+ color + ' -2px 2px 0'
+ ];
+
+ styleElement.sheet.cssRules[0].style.textShadow = shadows.join(', ');
} catch (error) {
// eslint-disable-next-line no-console
console.error('HTMLVideo', error);
diff --git a/src/withHTMLSubtitles/withHTMLSubtitles.js b/src/withHTMLSubtitles/withHTMLSubtitles.js
index 4bdcaf1..3af0b7d 100644
--- a/src/withHTMLSubtitles/withHTMLSubtitles.js
+++ b/src/withHTMLSubtitles/withHTMLSubtitles.js
@@ -74,13 +74,25 @@ function withHTMLSubtitles(Video) {
}
subtitlesElement.style.bottom = offset + '%';
+ var color = outlineColor;
+ var shadows = [
+ color + ' 2px 0px 0',
+ color + ' -2px 0px 0',
+ color + ' 0px 2px 0',
+ color + ' 0px -2px 0',
+ color + ' 2px 2px 0',
+ color + ' -2px -2px 0',
+ color + ' 2px -2px 0',
+ color + ' -2px 2px 0'
+ ];
+
subtitlesRenderer.render(cuesByTime, videoState.time + delay).forEach(function(cueNode) {
cueNode.style.display = 'inline-block';
cueNode.style.padding = '0.2em';
cueNode.style.fontSize = Math.floor(size / 25) + 'vmin';
cueNode.style.color = textColor;
cueNode.style.backgroundColor = backgroundColor;
- cueNode.style.textShadow = '1px 1px 0.1em ' + outlineColor;
+ cueNode.style.textShadow = shadows.join(', ');
subtitlesElement.appendChild(cueNode);
subtitlesElement.appendChild(document.createElement('br'));
});