Fix #1003: Formatted captions issue

src/js/captions.js

@@ -222,7 +222,7 @@ const captions = {
         if (changed) {
             // Empty the container and create a new child element
             utils.emptyElement(this.elements.captions);
-            const caption = utils.createElement('span');
+            const caption = utils.createElement('span', utils.getAttributesFromSelector(this.config.selectors.caption));
             caption.innerHTML = content;
             this.elements.captions.appendChild(caption);
 

src/js/defaults.js

@@ -328,6 +328,7 @@ const defaults = {
         },
         progress: '.plyr__progress',
         captions: '.plyr__captions',
+        caption: '.plyr__caption',
         menu: {
             quality: '.js-plyr__menu__list--quality',
         },

src/sass/components/captions.scss

@@ -21,7 +21,7 @@
     transition: transform 0.4s ease-in-out;
     width: 100%;
 
-    span {
+    .plyr__caption {
         background: $plyr-captions-bg;
         border-radius: 2px;
         box-decoration-break: clone;