<style> /* 1. Global Reset */<br /> body, html {<br /> margin: 0;<br /> padding: 0;<br /> width: 100%;<br /> height: 100%;<br /> background: #000;<br /> overflow: hidden;<br /> }<br /> #tv-fullscreen-app {<br /> position: fixed;<br /> top: 0; left: 0;<br /> width: 100vw;<br /> height: 100dvh;<br /> background: #000;<br /> z-index: 99999;<br /> overflow: hidden;<br /> }<br /> /* 2. The Video - FIXED ASPECT RATIO */<br /> #kurd-tv-player {<br /> position: absolute;<br /> top: 50%; left: 50%;<br /> transform: translate(-50%, -50%);<br /> /* This locks the video to a 16:9 shape so it NEVER stretches */<br /> aspect-ratio: 16 / 9;<br /> /* These rules ensure the video covers the entire screen area */<br /> min-width: 100%;<br /> min-height: 100%;<br /> width: auto;<br /> height: auto;<br /> opacity: 0;<br /> transition: opacity 1.2s ease-in;<br /> pointer-events: none;<br /> }<br /> /* 3. Overlay & UI */<br /> #remote-overlay {<br /> position: absolute;<br /> top: 0; left: 0;<br /> width: 100%; height: 100%;<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> justify-content: center;<br /> background: #000;<br /> z-index: 100000;<br /> cursor: pointer;<br /> border: none;<br /> outline: none;<br /> }<br /> .play-circle {<br /> width: 100px; height: 100px;<br /> background: ;<br /> border-radius: 50%;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> margin-bottom: 20px;<br /> box-shadow: 0 0 20px rgba(230, 33, 23, 0.4);<br /> }<br /> .tv-label {<br /> color: white;<br /> font-family: sans-serif;<br /> font-size: 16px;<br /> font-weight: bold;<br /> letter-spacing: 1px;<br /> text-align: center;<br /> padding: 0 20px;<br /> }<br /> svg { fill: yellow; }<br /> </style> <iframe id="kurd-tv-player" src="https://player.vimeo.com/video/1059377052?background=1&autoplay=0&muted=1&autopause=0&playsinline=1&transparent=0" frameborder="0"> </iframe> <button id="remote-overlay"> PRESS OK TO WATCH LIVE </button>