CINXE.COM
Clevercast Player
<!DOCTYPE html> <html lang="en"> <head> <title>Clevercast Player</title> <style> ::-webkit-scrollbar { width: 16px; } /* Track */ ::-webkit-scrollbar-track { border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #fff; border: 2px solid #369; border-radius: 10px; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; overflow-y: auto; line-height: 1.5; } body { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; font-family: Arial regular, Verdana, Helvetica, sans-serif; font-size: 16px; background-color: #003D84; } body * { box-sizing: border-box; } p { margin: 0; } .head { color: #fff; position: absolute; top: 10px; display: inline-block; font-size: 1.2rem; left: 10px; } .background { background: rgba(0, 61, 132, 0.75); position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: table; overflow: auto; } .container { display: table; height: 100%; max-width: 480px; margin: 0 auto; } .content { color: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: center; height: 100%; } .content p a:focus { outline: 3px solid #ffd617; } /* HEADER */ .content .title { margin: 0; padding: 20px 30px 0; background-color: #003D84; font-weight: normal; font-size: 24px; } /* INFO */ .info { position: relative; padding: 10px; background-color: #003D84; display: flex; flex-direction: column; justify-content: center; } .info p:first-child { padding: 20px 20px 20px 70px; position: relative; order: 1; } .info p:first-child:before { background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.351 6.493c-.08-.801.55-1.493 1.351-1.493s1.431.692 1.351 1.493l-.801 8.01c-.029.282-.266.497-.55.497s-.521-.215-.55-.498l-.801-8.009zm1.351 12.757c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z'/%3E%3C/svg%3E"); content: " "; display: inline-block; width: 26px; height: 26px; margin-right: 5px; margin-left: 1px; background-repeat: no-repeat; background-position: center center; background-size: 26px auto; position: absolute; left: 24px; top: 22px; opacity: 0.75; } .info p a { color: #fff; } /* REMEMBER */ .info .remember { overflow: hidden; padding: 0 10px 10px; order: 3; background-color: #003D84; } .button { order: 2; } .remember input { position: absolute; left: -999px; } .remember label { position: relative; display: block; padding: 15px 15px 15px 60px; border: 3px solid transparent; cursor: pointer; } .remember label span { display: block; } input:focus ~ label { border: 3px solid #ffd617; } /* CHECKBOX */ label:before { content: " "; display: inline-block; width: 18px; height: 18px; background: transparent; border: 2px solid #fff; position: absolute; left: 16px; top: 18px; } input:checked ~ label:before { background: #fff; } input:checked ~ label:after { content: " "; display: inline-block; width: 5px; height: 10px; border-right: 4px solid #444; border-bottom: 4px solid #444; transform: rotate(45deg); position: absolute; left: 23px; top: 20px; } .remember span { opacity: 0.75; } /* BUTTON */ .info .button { margin: 0 0 10px 0; padding: 0 0 0 70px; } .info .button button { text-align: left; } .show-content svg { width: 40px; height: 40px; } .show-content, .show-content:link, .show-content:visited { color: #fff; text-decoration: none; font-weight: 300; font-size: 16px; padding: 12px 20px 12px 12px; outline: none; position: relative; cursor: pointer; border: 0; display: flex; align-items: center; gap: 20px; border-radius: 10px; background-color: #040404; border: 3px solid #040404; } .show-content:hover, .show-content:focus-visible { border: 3px solid #ffd617; color: #040404; background-color: #ffd617; } @media all and (max-width: 420px) { .content { background-color: #003D84; padding: 0; font-size: 14px; } .content .info { padding: 5px; } .content p:first-child { padding: 10px; } .content p:first-child:before { display: none; } .content .button { padding: 0; margin: 0 auto; display: block; } .content .button button { font-size: 14px; padding: 6px 10px 6px 6px; gap: 8px; } .content .button button svg { width: 30px; height: 30px; } .content .remember { margin: 10px 0; } .content label { padding: 3px 5px 5px 30px; margin: 0; } .content label:before { left: 2px; top: 2px; transform: scale(0.6); } input:checked ~ label:after { left: 8px; top: 4px; transform: scale(0.6) rotate(45deg); } } @media all and (max-height: 300px) { .content .info { padding: 0; } .content, .content .button button { font-size: 13px; } } </style> </head> <body> <header> <div class="head">Clevercast Player</div> </header> <main> <div class="background" data-nosnippet> <div class="container"> <div class="content"> <div class="info"><p>This content is hosted by a third party. By showing the external content you accept the <a href='https://www.clevercast.com/terms-of-use/' title='Terms and conditions' target='_blank' >terms and conditions</a> of clevercast.com.</p><p class="button"><button type="button" title="Show external content" data-network="clevercast.com" data-location="https://webtools.europa.eu/crs/iframe?addconsent=clevercast.com&oriurl=https%3A%2F%2Fplayer.clevercast.com%2F%3Faccount_id%3DAkN3yR%26item_id%3DV3gwzD" class="show-content"><svg fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"/></svg><span>Show external content</span></button></p></div> </div> </div> </div> </main> <script> // References. let button = document.querySelector('button.show-content'); let remember = document.querySelector('#remember'); let isFrame = top.window !== window; let redirectTo = button?.dataset?.location; // Shortcut. const getURL = (checked) => { // Reference. let url = redirectTo; // Extra param. if (checked) { url += "&rememberMe=true"; } return url; }; // Survey window.addEventListener('message', (evt) => { // Reference. let data = evt.data; // If network concern, then refresh. if (data.service === 'cck-check-network') { if (button && data.network === button.dataset.network && data.url !== redirectTo) { location.href = getURL(data.accepted); } } }); // Trigger postMessage and redirection. if (button) { // Event. button.onclick = () => { // Forward the validation to all frame in parent. if (isFrame) { // Any useful information. let info = { url: redirectTo, accepted: remember?.checked, network: button.dataset.network }; window.parent.postMessage({...{ service: 'cck-check-network' }, ...info}, "*"); } // Redirect. location.href = getURL(remember?.checked); }; } </script> </body> </html>