Example
Jonathan_Hill
2 days agoSuper Hero
Turn That Light Off
Hello! Non-human characters can be a strong choice for your e-learning courses. They're often more popular with users than AI avatars. My characters always come across as a bit grumpy, for some re...
Jonathan_Hill
2 days agoSuper Hero
P.S. Given Dave has quite a distinctive voice, I thought it best to include closed captions. But I wanted to move the captions so they didn't block the question.
To achieve this, I used the following Javascript:
// Function to detect if the device is mobile
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
const addCss = css => {
const style = document.createElement("style");
style.innerHTML = css;
document.head.appendChild(style);
};
// Replace X and Y with your desired coordinates in percentage
const xPercent = 33; // Example: 50% from the left of the player
const yPercent = 80; // Example: 90% from the top of the player
// Only apply the custom positioning if not on a mobile device
if (!isMobile()) {
addCss(`
/* Ensure the player container has relative positioning */
.player-container {
position: relative !important;
}
.view-desktop .caption-container, .theme-unified .caption-container {
position: absolute !important; /* Absolute positioning relative to the player container */
top: ${yPercent}% !important; /* Y-coordinate */
left: ${xPercent}% !important; /* X-coordinate */
transform: translate(-50%, 0%) !important; /* Adjust the Y-axis translation to align properly */
width: auto !important; /* Ensure width is adjusted if needed */
z-index: 1000 !important; /* Ensure it's above other elements */
}
.view-desktop .caption, .theme-unified .caption {
width: 100% !important; /* Full width within the container */
position: relative !important; /* Relative to the container */
top: 0 !important; /* Adjust top if needed */
left: 0 !important; /* Adjust left if needed */
transform: none !important; /* Remove any transform applied */
}
`);
console.log(`Captions positioned at ${xPercent}% horizontally, ${yPercent}% vertically.`);
}
But this isn't reliable on mobile devices, so the same code also first checks if the course is running on a phone or tablet, and doesn't run in that case.
On a desktop, having the captions appear directly underneath the character's mouth makes the layout much cleaner.
