Greasy Fork is available in English.
Fixed font size and with background captions in SharePoint video player (No Flicker)
// ==UserScript==
// @name Custom SharePoint Caption
// @namespace http://tampermonkey.net/
// @version 1.7
// @description Fixed font size and with background captions in SharePoint video player (No Flicker)
// @match https://v6v10-my.sharepoint.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const FONT_SIZE = '30px';
const BG_COLOR = 'rgba(0, 0, 0, 0.75)';
const BORDER_RADIUS = '8px';
const PADDING = '10px 15px';
const cssStyles = `
.captions {
--oneplayer-caption-text-size: ${FONT_SIZE} !important;
font-size: ${FONT_SIZE} !important;
background-color: ${BG_COLOR} !important;
border-radius: ${BORDER_RADIUS} !important;
padding: ${PADDING} !important;
display: inline-block !important;
white-space: normal !important;
margin: 0 !important;
border: none !important;
transition: background-color 0.1s, padding 0.1s;
}
.captions.hide-bg {
background-color: transparent !important;
padding: 0 !important;
}
.captions-section {
bottom: 30px !important;
top: auto !important;
text-align: center !important;
}
.video-player-container .captions-region {
position: absolute !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
width: 100% !important;
height: 100% !important;
background-color: transparent !important;
}
`;
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.appendChild(document.createTextNode(cssStyles));
document.head.appendChild(styleElement);
const observer = new MutationObserver(() => {
const captions = document.querySelectorAll('.captions');
captions.forEach(caption => {
if (caption.textContent.trim() === '') {
caption.classList.add('hide-bg');
} else {
caption.classList.remove('hide-bg');
}
});
});
observer.observe(document.body, {
childList: true,
subtree: true,
characterData: true
});
})();