<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ad-Free Car YouTube Resizer</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #000;
            overflow: hidden;
            font-family: sans-serif;
        }
        #player-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        /* Aspect Ratio & Stretching Modes */
        .fit iframe { object-fit: contain; }
        .stretch iframe { width: 100% !important; height: 100% !important; transform: scale(1.15); }
        
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
            background: rgba(0,0,0,0.85);
            padding: 8px;
            border-radius: 8px;
            display: flex;
            gap: 6px;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        }
        input, button {
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 4px;
            border: none;
        }
        input { background: #222; color: #fff; width: 210px; outline: none; }
        button { background: #ff0000; color: #fff; cursor: pointer; font-weight: bold; }
        button.secondary { background: #444; }
    </style>
</head>
<body>
    <div id="controls">
        <input type="text" id="urlInput" placeholder="Paste YouTube Link..." />
        <button onclick="loadVideo()">Play</button>
        <button class="secondary" onclick="setMode('fit')">Fit</button>
        <button class="secondary" onclick="setMode('stretch')">Stretch</button>
        <button class="secondary" onclick="toggleMenu()">Hide Menu</button>
    </div>
    
    <div id="player-container" class="fit">
        <div id="iframe-wrap" style="width:100%; height:100%;"></div>
    </div>

    <script>
        // Using a public, high-speed ad-free Invidious proxy instance
        const adFreeBackend = "https://vid.priv.au";

        function extractVideoId(url) {
            const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
            const match = url.match(regExp);
            return (match && match[2].length === 11) ? match[2] : null;
        }

        function loadVideo() {
            const url = document.getElementById('urlInput').value;
            const videoId = extractVideoId(url);
            if (videoId) {
                const wrap = document.getElementById('iframe-wrap');
                // Loads the video cleanly through the ad-free proxy embed
                wrap.innerHTML = `<iframe src="${adFreeBackend}/embed/${videoId}?autoplay=1" allow="autoplay; encrypted-media" allowfullscreen></iframe>`;
            } else {
                alert('Please enter a valid YouTube URL');
            }
        }

        function setMode(mode) {
            document.getElementById('player-container').className = mode;
        }

        function toggleMenu() {
            const controls = document.getElementById('controls');
            controls.style.display = controls.style.display === 'none' ? 'flex' : 'none';
        }
    </script>
</body>
</html>