HLS Demo

/* Style for the full-screen overlay button */ .overlay-button { position: fixed; top: 0; /* Position the button at the top */ left: 0; /* Position the button at the left */ width: 100%; /* Make the button fill the entire width */ height: 100%; /* Make the button fill the entire height */ display: flex; /* Use flexbox to center the text */ justify-content: center; /* Horizontally center the text */ align-items: center; /* Vertically center the text */ background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */ color: white; /* White text */ font-size: 2rem; /* Large font size */ text-align: center; /* Center the text */ text-decoration: none; /* Remove the underline from the link */ /*font-weight: bold; /* Make the text bold */ z-index: 1000; /* Ensure the button is on top of other elements */ transition: background-color 0.3s ease; /* Smooth background color change */ } /* Hover effect for the button */ .overlay-button:hover { background-color: rgba(0, 0, 0, 0.9); /* Darken the background on hover */ } /* Adjust subtitle position using ::cue */ track { position: absolute; /* This allows us to control placement */ bottom: 20px; /* Move subtitles closer to the bottom */ text-align: center; color: white; /* Change the color of the captions */ background: rgba(0, 0, 0, 0.5); /* Optional: add background for better readability */ padding: 5px; }

Download Options