user: this here dsoesnt play: "formatStreams": [     {       "url": "https://rr2---sn-n02xgoxufvg3-2gbz.googlevideo.com/videoplayback?expire=1727467029&ei=tbn2ZsCZMKXIp-oPk5HlgAQ&ip=2a02%3A6ea0%3A2901%3A1%3A%3Ae01d&id=o-AEZUAnOla1UX2HJAo7-Q1PX1Wt8EEMkdhD5UwmtrkFKa&itag=18&source=youtube&requiressl=yes&xpc=EgVo2aDSNQ%3D%3D&mh=2V&mm=31%2C29&mn=sn-n02xgoxufvg3-2gbz%2Csn-5hneknek&ms=au%2Crdu&mv=m&mvi=2&pl=40&initcwndbps=1112500&bui=AXLXGFRO4x4Lh7qgMaiYa4X4Lyg_GMuQmX74Uxgc4oOr3uXkT0RKyiauWGiddTTYJUnVM4q9K39WRYn8&spc=54MbxbFwgQdKwsD6aPcESZDKe-svc04M3dveOIxEe2SnYrtOdPdzotI&vprv=1&svpuc=1&mime=video%2Fmp4&ns=GV1cmku0YZ0vwZnxlREWQBQQ&rqh=1&cnr=14&ratebypass=yes&dur=498.602&lmt=1697630310494962&mt=1727444951&fvip=3&fexp=51299152%2C51300761&c=WEB_CREATOR&sefc=1&txp=5538434&n=8q3kBpAuU6kQMw&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cxpc%2Cbui%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Cns%2Crqh%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AJfQdSswQwIgcJ1ngnFomckerVvb6pBcYeL7Uhf0_vUL4RpVUkKlBfgCH1s1rjLx4AnDpkxHm7XNAPYY7cMDguAKF99NJvvHl-U%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&lsig=ABPmVW0wRQIgNoZscAO_KMpXgs4TBjZdGkaG2vTbHpiZbd2gqL-PvyACIQD_EKW-hmsGenQ-Xp7OZNq3hE_9fXljEP6VsjskWV5DMw%3D%3D&pot=MnTZmAWallRlP9mgfeOZP45km29ZmzvRNj4z-sCR9pAcW7CP-Snkca0FNSMpZCrB3JlTw6EvK_0LBy-Y__usJrEbfN0vk8aopW8i41vc38xcYUIgVYTLMSAS2wUbiXKsb1eYdaycA1kKoVIYqUmLaeYvax-FhA%3D%3D&host=rr2---sn-n02xgoxufvg3-2gbz.googlevideo.com",       "itag": "18",       "type": "video/mp4; codecs=\"avc1.42001E, mp4a.40.2\"",       "quality": "medium",       "bitrate": "318397",       "fps": 24,       "size": "640x360",       "resolution": "360p",       "qualityLabel": "360p",       "container": "mp4",       "encoding": "h264"     }   ],   "captions": [     {       "label": "English (auto-generated)",       "language_code": "en",       "url": "/api/v1/captions/rY5HxM4E28E?label=English+%28auto-generated%29"     },     {       "label": "English (United States)",       "language_code": "en-US",       "url": "/api/v1/captions/rY5HxM4E28E?label=English+%28United+States%29"     }   ], from the json response dynamically, fix it: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>PlayBox - Watch Video</title>     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">     <link href="https://vjs.zencdn.net/7.21.8/video-js.css" rel="stylesheet" />     <style>         :root {             --bg-color: #181818;             --card-bg: #242424;             --text-primary: #FFFFFF;             --text-secondary: #B3B3B3;             --accent-color: #BB86FC;             --border-radius: 8px;             --transition-speed: 0.3s;         }         body {             font-family: 'Roboto', sans-serif;             margin: 0;             padding: 0;             background-color: var(--bg-color);             color: var(--text-primary);         }         .container {             max-width: 800px;             margin: 0 auto;             padding: 20px;         }         header {             text-align: center;             padding: 20px 0;         }         h1 {             font-size: 2rem;             margin: 0;             color: var(--accent-color);         }         .video-container {             margin-bottom: 20px;             position: relative;         }         .video-description {             background-color: var(--card-bg);             border-radius: var(--border-radius);             padding: 15px;             margin-bottom: 20px;         }         .video-details {             margin-bottom: 10px;         }         .recommended-videos {             margin-top: 40px;         }         .recommended-video {             display: flex;             background-color: var(--card-bg);             border-radius: var(--border-radius);             padding: 10px;             margin-bottom: 10px;             transition: transform var(--transition-speed), box-shadow var(--transition-speed);             cursor: pointer;         }         .recommended-video:hover {             transform: translateY(-2px);             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);         }         .recommended-video img {             border-radius: var(--border-radius);             margin-right: 10px;         }         .recommended-video h4 {             margin: 0;             font-size: 1.1rem;             color: var(--text-primary);         }         .recommended-video p {             margin: 0;             color: var(--text-secondary);         }         .video-js {             width: 100%;             border-radius: var(--border-radius);         }     </style> </head> <body>     <div class="container">         <header>             <h1>Watch Video</h1>         </header>         <div class="video-container" id="video-container">             <!-- Video will be displayed here -->         </div>         <div class="video-description" id="video-description">             <!-- Video description will be displayed here -->         </div>         <div class="recommended-videos" id="recommended-videos">             <!-- Recommended videos will be displayed here -->         </div>     </div>      <link href="https://vjs.zencdn.net/7.21.8/video-js.css" rel="stylesheet" />     <script src="https://vjs.zencdn.net/7.21.8/video.min.js"></script>     <script>         async function fetchVideoDetails() {             const urlParams = new URLSearchParams(window.location.search);             const videoId = urlParams.get('id');             if (!videoId) {                 document.getElementById('video-container').innerText = 'Video ID is missing.';                 return;             }              const apiUrl = `https://invidious.nerdvpn.de/api/v1/videos/${videoId}`;              try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displayVideoDetails(data);             } catch (error) {                 console.error('Error fetching video details:', error);             }         }  function displayVideoDetails(data) {     const videoContainer = document.getElementById('video-container');     const videoDescription = document.getElementById('video-description');     const recommendedVideos = document.getElementById('recommended-videos');      // Check for formatStreams to get the first video URL     if (data.formatStreams && data.formatStreams.length > 0) {         const videoUrl = data.formatStreams[0].url; // Get the URL of the first stream         // Video thumbnail         const thumbnail = document.createElement('img');         thumbnail.src = data.videoThumbnails[0].url; // Get the first thumbnail         thumbnail.alt = data.title;         thumbnail.className = 'video-thumbnail';         thumbnail.onclick = () => playVideo(videoUrl, data.title); // Play video on click         videoContainer.appendChild(thumbnail);     } else {         videoContainer.innerText = 'No video streams available.';     }      // Video description     videoDescription.innerHTML = `         <div class="video-details">             <h2>${data.title}</h2>             <p>${data.description}</p>             <p><strong>Views:</strong> ${data.viewCount}</p>             <p><strong>Likes:</strong> ${data.likeCount}</p>             <p><strong>Published:</strong> ${new Date(data.published).toLocaleString()}</p>         </div>     `;      // Recommended videos     if (data.recommendedVideos.length > 0) {         recommendedVideos.innerHTML = '<h3>Recommended Videos</h3>';         data.recommendedVideos.forEach(video => {             const recommendedVideo = document.createElement('div');             recommendedVideo.className = 'recommended-video';             recommendedVideo.onclick = () => playRecommendedVideo(video.videoId); // Play recommended video on click             recommendedVideo.innerHTML = `                 <img src="${video.videoThumbnails[0].url}" alt="${video.title}" width="120">                 <div>                     <h4>${video.title}</h4>                     <p>By: ${video.author}</p>                     <p>Views: ${video.viewCountText}</p>                 </div>             `;             recommendedVideos.appendChild(recommendedVideo);         });     } else {         recommendedVideos.innerHTML = '<p>No recommended videos available.</p>';     } }          function playVideo(data) {             const videoContainer = document.getElementById('video-container');             videoContainer.innerHTML = ''; // Clear previous content              const videoElement = document.createElement('video');             videoElement.className = 'video-js vjs-default-skin';             videoElement.setAttribute('controls', 'true');             videoElement.setAttribute('data-setup', '{}');              const sourceElement = document.createElement('source');             sourceElement.src = data.hlsUrl || data.dashUrl; // Use HLS or DASH URL             sourceElement.type = 'application/x-mpegURL'; // For HLS              videoElement.appendChild(sourceElement);             videoContainer.appendChild(videoElement);             videojs(videoElement); // Initialize Video.js             videoElement.play();         }          function playRecommendedVideo(videoId) {             window.location.href = `watch.html?id=${videoId}`; // Redirect to the watch page of the recommended video         }          window.addEventListener('load', fetchVideoDetails);     </script> </body> </html>
PROMPT: user: this here dsoesnt play: "formatStreams": [     {       "url": "https://rr2---sn-n02xgoxufvg3-2gbz.googlevideo.com/videoplayback?expire=1727467029&ei=tbn2ZsCZMKXIp-oPk5HlgAQ&ip=2a02%3A6ea0%3A2901%3A1%3A%3Ae01d&id=o-AEZUAnOla1UX2HJAo7-Q1PX1Wt8EEMkdhD5UwmtrkFKa&itag=18&source=youtube&requiressl=yes&xpc=EgVo2aDSNQ%3D%3D&mh=2V&mm=31%2C29&mn=sn-n02xgoxufvg3-2gbz%2Csn-5hneknek&ms=au%2Crdu&mv=m&mvi=2&pl=40&initcwndbps=1112500&bui=AXLXGFRO4x4Lh7qgMaiYa4X4Lyg_GMuQmX74Uxgc4oOr3uXkT0RKyiauWGiddTTYJUnVM4q9K39WRYn8&spc=54MbxbFwgQdKwsD6aPcESZDKe-svc04M3dveOIxEe2SnYrtOdPdzotI&vprv=1&svpuc=1&mime=video%2Fmp4&ns=GV1cmku0YZ0vwZnxlREWQBQQ&rqh=1&cnr=14&ratebypass=yes&dur=498.602&lmt=1697630310494962&mt=1727444951&fvip=3&fexp=51299152%2C51300761&c=WEB_CREATOR&sefc=1&txp=5538434&n=8q3kBpAuU6kQMw&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cxpc%2Cbui%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Cns%2Crqh%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AJfQdSswQwIgcJ1ngnFomckerVvb6pBcYeL7Uhf0_vUL4RpVUkKlBfgCH1s1rjLx4AnDpkxHm7XNAPYY7cMDguAKF99NJvvHl-U%3D&lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpl%2Cinitcwndbps&lsig=ABPmVW0wRQIgNoZscAO_KMpXgs4TBjZdGkaG2vTbHpiZbd2gqL-PvyACIQD_EKW-hmsGenQ-Xp7OZNq3hE_9fXljEP6VsjskWV5DMw%3D%3D&pot=MnTZmAWallRlP9mgfeOZP45km29ZmzvRNj4z-sCR9pAcW7CP-Snkca0FNSMpZCrB3JlTw6EvK_0LBy-Y__usJrEbfN0vk8aopW8i41vc38xcYUIgVYTLMSAS2wUbiXKsb1eYdaycA1kKoVIYqUmLaeYvax-FhA%3D%3D&host=rr2---sn-n02xgoxufvg3-2gbz.googlevideo.com",       "itag": "18",       "type": "video/mp4; codecs=\"avc1.42001E, mp4a.40.2\"",       "quality": "medium",       "bitrate": "318397",       "fps": 24,       "size": "640x360",       "resolution": "360p",       "qualityLabel": "360p",       "container": "mp4",       "encoding": "h264"     }   ],   "captions": [     {       "label": "English (auto-generated)",       "language_code": "en",       "url": "/api/v1/captions/rY5HxM4E28E?label=English+%28auto-generated%29"     },     {       "label": "English (United States)",       "language_code": "en-US",       "url": "/api/v1/captions/rY5HxM4E28E?label=English+%28United+States%29"     }   ], from the json response dynamically, fix it: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>PlayBox - Watch Video</title>     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">     <link href="https://vjs.zencdn.net/7.21.8/video-js.css" rel="stylesheet" />     <style>         :root {             --bg-color: #181818;             --card-bg: #242424;             --text-primary: #FFFFFF;             --text-secondary: #B3B3B3;             --accent-color: #BB86FC;             --border-radius: 8px;             --transition-speed: 0.3s;         }         body {             font-family: 'Roboto', sans-serif;             margin: 0;             padding: 0;             background-color: var(--bg-color);             color: var(--text-primary);         }         .container {             max-width: 800px;             margin: 0 auto;             padding: 20px;         }         header {             text-align: center;             padding: 20px 0;         }         h1 {             font-size: 2rem;             margin: 0;             color: var(--accent-color);         }         .video-container {             margin-bottom: 20px;             position: relative;         }         .video-description {             background-color: var(--card-bg);             border-radius: var(--border-radius);             padding: 15px;             margin-bottom: 20px;         }         .video-details {             margin-bottom: 10px;         }         .recommended-videos {             margin-top: 40px;         }         .recommended-video {             display: flex;             background-color: var(--card-bg);             border-radius: var(--border-radius);             padding: 10px;             margin-bottom: 10px;             transition: transform var(--transition-speed), box-shadow var(--transition-speed);             cursor: pointer;         }         .recommended-video:hover {             transform: translateY(-2px);             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);         }         .recommended-video img {             border-radius: var(--border-radius);             margin-right: 10px;         }         .recommended-video h4 {             margin: 0;             font-size: 1.1rem;             color: var(--text-primary);         }         .recommended-video p {             margin: 0;             color: var(--text-secondary);         }         .video-js {             width: 100%;             border-radius: var(--border-radius);         }     </style> </head> <body>     <div class="container">         <header>             <h1>Watch Video</h1>         </header>         <div class="video-container" id="video-container">             <!-- Video will be displayed here -->         </div>         <div class="video-description" id="video-description">             <!-- Video description will be displayed here -->         </div>         <div class="recommended-videos" id="recommended-videos">             <!-- Recommended videos will be displayed here -->         </div>     </div>      <link href="https://vjs.zencdn.net/7.21.8/video-js.css" rel="stylesheet" />     <script src="https://vjs.zencdn.net/7.21.8/video.min.js"></script>     <script>         async function fetchVideoDetails() {             const urlParams = new URLSearchParams(window.location.search);             const videoId = urlParams.get('id');             if (!videoId) {                 document.getElementById('video-container').innerText = 'Video ID is missing.';                 return;             }              const apiUrl = `https://invidious.nerdvpn.de/api/v1/videos/${videoId}`;              try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displayVideoDetails(data);             } catch (error) {                 console.error('Error fetching video details:', error);             }         }  function displayVideoDetails(data) {     const videoContainer = document.getElementById('video-container');     const videoDescription = document.getElementById('video-description');     const recommendedVideos = document.getElementById('recommended-videos');      // Check for formatStreams to get the first video URL     if (data.formatStreams && data.formatStreams.length > 0) {         const videoUrl = data.formatStreams[0].url; // Get the URL of the first stream         // Video thumbnail         const thumbnail = document.createElement('img');         thumbnail.src = data.videoThumbnails[0].url; // Get the first thumbnail         thumbnail.alt = data.title;         thumbnail.className = 'video-thumbnail';         thumbnail.onclick = () => playVideo(videoUrl, data.title); // Play video on click         videoContainer.appendChild(thumbnail);     } else {         videoContainer.innerText = 'No video streams available.';     }      // Video description     videoDescription.innerHTML = `         <div class="video-details">             <h2>${data.title}</h2>             <p>${data.description}</p>             <p><strong>Views:</strong> ${data.viewCount}</p>             <p><strong>Likes:</strong> ${data.likeCount}</p>             <p><strong>Published:</strong> ${new Date(data.published).toLocaleString()}</p>         </div>     `;      // Recommended videos     if (data.recommendedVideos.length > 0) {         recommendedVideos.innerHTML = '<h3>Recommended Videos</h3>';         data.recommendedVideos.forEach(video => {             const recommendedVideo = document.createElement('div');             recommendedVideo.className = 'recommended-video';             recommendedVideo.onclick = () => playRecommendedVideo(video.videoId); // Play recommended video on click             recommendedVideo.innerHTML = `                 <img src="${video.videoThumbnails[0].url}" alt="${video.title}" width="120">                 <div>                     <h4>${video.title}</h4>                     <p>By: ${video.author}</p>                     <p>Views: ${video.viewCountText}</p>                 </div>             `;             recommendedVideos.appendChild(recommendedVideo);         });     } else {         recommendedVideos.innerHTML = '<p>No recommended videos available.</p>';     } }          function playVideo(data) {             const videoContainer = document.getElementById('video-container');             videoContainer.innerHTML = ''; // Clear previous content              const videoElement = document.createElement('video');             videoElement.className = 'video-js vjs-default-skin';             videoElement.setAttribute('controls', 'true');             videoElement.setAttribute('data-setup', '{}');              const sourceElement = document.createElement('source');             sourceElement.src = data.hlsUrl || data.dashUrl; // Use HLS or DASH URL             sourceElement.type = 'application/x-mpegURL'; // For HLS              videoElement.appendChild(sourceElement);             videoContainer.appendChild(videoElement);             videojs(videoElement); // Initialize Video.js             videoElement.play();         }          function playRecommendedVideo(videoId) {             window.location.href = `watch.html?id=${videoId}`; // Redirect to the watch page of the recommended video         }          window.addEventListener('load', fetchVideoDetails);     </script> </body> </html>