Forum Discussion
Fully Customized Player
We need to create a module with the slide layout shown in the attachment. How do we create such a player? Can you help us with the approaches? Do we need to use JavaScript? Do we need to use an HTML shell? How do we make it fully customized, as shown in the image? It would be great if it were detailed enough so that we can create it in a minimum time frame.
I am attaching the HTML code that we used to wrap the player inside.
1 Reply
HTML code used to wrap the storyline
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Storyline Player</title> <style> body { margin: 0; font-family: Arial, sans-serif; background: #000; overflow: hidden; } .player-wrapper { position: relative; width: 100vw; height: 100vh; } /* Title Bar */ .title-bar { position: fixed; /* Always on top */ top: 0; left: 100; width: 75%; height: 50px; background: #F47920; /* Correct Orange */ color: white; font-size: 18px; font-weight: bold; display: flex; align-items: center; justify-content: center; z-index: 9999; /* Ensure it stays above all elements */ } /* Storyline iframe */ .storyline-container { position: absolute; top: 50px; /* Below the title bar */ width: 100%; height: calc(100% - 50px); /* Adjust for title bar */ border: none; } /* Logo */ .logo-container { position: fixed; /* Always on top */ bottom: 10px; left: 10px; width: 100px; height: auto; z-index: 9999; /* Ensure it stays visible */ } </style> </head> <body> <div class="player-wrapper"> <!-- Title Bar --> <div class="title-bar" id="courseTitle">Loading</div> <!-- Storyline Content --> <iframe id="storylineFrame" class="storyline-container" src="story.html"></iframe> <!-- Logo --> <img src="logo.png" alt="Company Logo" class="logo-container"> </div> <script> // Hide Storyline's default player UI function hideStorylinePlayer() { var iframe = document.getElementById("storylineFrame"); if (!iframe) return; iframe.onload = function () { var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; setTimeout(() => { if (iframeDoc.querySelector('.player')) { iframeDoc.querySelector('.player').style.display = 'none'; // Hide default player } }, 1000); // Delay to ensure Storyline loads }; } // Get the title from Storyline window.addEventListener("message", function(event) { if (event.data.type === "SET_TITLE") { document.getElementById("courseTitle").innerText = event.data.title; } }, false); hideStorylinePlayer(); // Fullscreen Detection document.addEventListener("fullscreenchange", function() { var isFullscreen = document.fullscreenElement !== null; document.querySelector(".title-bar").style.display = isFullscreen ? "flex" : "flex"; document.querySelector(".logo-container").style.display = isFullscreen ? "block" : "block"; }); </script> </body> </html>
