Forum Discussion

BhumijaSaxena's avatar
BhumijaSaxena
Community Member
9 months ago

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>