* { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; } .button-group { display: flex; justify-content: center; gap: 5px; margin: 10px; flex-wrap: wrap; } /* Button container styling now as a regular block element */ #button-container { background-color: white; color: white; max-width: 100%; z-index: 10; display: flex; justify-content: center; padding: 5px 0; } .button-group button, .source-button { padding: 10px 20px; cursor: pointer; background-color: #3498db; color: #fff; border: none; border-radius: 5px; transition: background-color 0.3s ease; flex: 1 1 auto; max-width: 200px; } .button-group button:hover, .source-button:hover { background-color: green; } /* Responsive video container using 16:9 aspect ratio */ #tv-container { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ margin: 20px 0; overflow: hidden; background-color: #000; /* Removed fixed height */ } #tv-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /* Background image covers the loaded 16:9 area */ background: url('https://goalzone.com.ng/wp-content/uploads/2025/03/3-e1742993011839.jpg') no-repeat center center; background-size: cover; } /* Overlay text styling */ #overlay-text { position: absolute; bottom: 50px; left: 0; width: 100%; color: #fff; text-align: center; padding: 10px 0; z-index: 7; font-size: 16px; } /* Brand logo styling */ img.brand-logo { position: absolute; top: 80px; right: 0; width: 100px; opacity: 0.8; z-index: 5; } /* Styling for marquee */ marquee { display: block; padding: 5px; background-color: #3498db; border-radius: 5px; border: 1px solid #000; color: #fff; cursor: pointer; margin: 10px; } @media (max-width: 768px) { .button-group button, .source-button { max-width: 100%; font-size: 14px; padding: 8px 16px; } #overlay-text { font-size: 14px; bottom: 40px; } img.brand-logo { width: 80px; top: 60px; } } LIVE ALT 1 ALT 2 ALT 3 goalzone.com.ng | Goal Zone TV function changeSource(newSource, showArticle, showButtons) { document.getElementById('tv-iframe').src = newSource; var streamArticle = document.getElementById('stream-article'); if (streamArticle) { streamArticle.style.display = showArticle ? 'block' : 'none'; } document.getElementById('button-container').style.display = showButtons ? 'flex' : 'none'; }
