Spaces:
Running
Running
| <html><head><base href="https://www.googleapis.com/youtube/v3/search"><title>YouTube API Response - Search Results</title> | |
| <style> | |
| body { | |
| font-family: 'Roboto', Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #3c4043; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f8f9fa; | |
| } | |
| header { | |
| background: linear-gradient(135deg, #FF0000, #FF5733); | |
| color: white; | |
| text-align: center; | |
| padding: 1em; | |
| margin-bottom: 2em; | |
| border-radius: 8px; | |
| } | |
| h1, h2, h3 { | |
| color: #202124; | |
| } | |
| .container { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .video-item { | |
| border-bottom: 1px solid #dadce0; | |
| padding: 15px 0; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .video-item:last-child { | |
| border-bottom: none; | |
| } | |
| .video-thumbnail { | |
| width: 120px; | |
| height: 90px; | |
| margin-right: 15px; | |
| border-radius: 4px; | |
| } | |
| .video-info { | |
| flex: 1; | |
| } | |
| .video-title { | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: #1a73e8; | |
| margin-bottom: 5px; | |
| text-decoration: none; | |
| } | |
| .video-title:hover { | |
| text-decoration: underline; | |
| } | |
| .video-channel { | |
| font-size: 14px; | |
| color: #5f6368; | |
| margin-bottom: 5px; | |
| } | |
| .video-description { | |
| font-size: 14px; | |
| color: #3c4043; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .note { | |
| background-color: #e8f0fe; | |
| border-left: 4px solid #1a73e8; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| pre { | |
| background-color: #f1f3f4; | |
| border: 1px solid #dadce0; | |
| border-radius: 4px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| } | |
| code { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 14px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>YouTube API Response</h1> | |
| <p>Search Results for "cats"</p> | |
| </header> | |
| <div class="container"> | |
| <h2>Video Search Results</h2> | |
| <div class="video-item"> | |
| <img class="video-thumbnail" src="https://i.ytimg.com/vi/hY7m5jjJ9mM/default.jpg" alt="Thumbnail of cats video"> | |
| <div class="video-info"> | |
| <a href="https://www.youtube.com/watch?v=hY7m5jjJ9mM" class="video-title">Cute Cats and Kittens Meowing Compilation</a> | |
| <div class="video-channel">CuteVids</div> | |
| <div class="video-description">Enjoy this adorable compilation of cats and kittens meowing. Perfect for cat lovers and anyone who needs a smile!</div> | |
| </div> | |
| </div> | |
| <div class="video-item"> | |
| <img class="video-thumbnail" src="https://i.ytimg.com/vi/SQJrYw1QvSQ/default.jpg" alt="Thumbnail of cats video"> | |
| <div class="video-info"> | |
| <a href="https://www.youtube.com/watch?v=SQJrYw1QvSQ" class="video-title">Funny Cats Compilation 2023 | Try Not to Laugh Challenge</a> | |
| <div class="video-channel">FunnyPetVideos</div> | |
| <div class="video-description">Get ready to laugh with this hilarious compilation of cats doing silly things. Can you make it through without laughing?</div> | |
| </div> | |
| </div> | |
| <div class="video-item"> | |
| <img class="video-thumbnail" src="https://i.ytimg.com/vi/G8KpPw303PY/default.jpg" alt="Thumbnail of cats video"> | |
| <div class="video-info"> | |
| <a href="https://www.youtube.com/watch?v=G8KpPw303PY" class="video-title">10 Cat Breeds You Won't Believe Exist</a> | |
| <div class="video-channel">AnimalFacts</div> | |
| <div class="video-description">Discover some of the rarest and most unique cat breeds from around the world. You won't believe your eyes!</div> | |
| </div> | |
| </div> | |
| <div class="video-item"> | |
| <img class="video-thumbnail" src="https://i.ytimg.com/vi/ZJT9CeEhM10/default.jpg" alt="Thumbnail of cats video"> | |
| <div class="video-info"> | |
| <a href="https://www.youtube.com/watch?v=ZJT9CeEhM10" class="video-title">How to Understand Your Cat Better | Cat Body Language</a> | |
| <div class="video-channel">PetExpert</div> | |
| <div class="video-description">Learn how to interpret your cat's body language and understand what they're trying to tell you. Become a cat whisperer!</div> | |
| </div> | |
| </div> | |
| <div class="video-item"> | |
| <img class="video-thumbnail" src="https://i.ytimg.com/vi/kHjfgG4DpPg/default.jpg" alt="Thumbnail of cats video"> | |
| <div class="video-info"> | |
| <a href="https://www.youtube.com/watch?v=kHjfgG4DpPg" class="video-title">Epic Cat Parkour | Ninja Cats Compilation</a> | |
| <div class="video-channel">AmazingAnimals</div> | |
| <div class="video-description">Watch these incredibly agile cats perform amazing jumps, flips, and stunts. Prepare to be amazed by feline athleticism!</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <h3>API Response Sample</h3> | |
| <pre><code> | |
| { | |
| "kind": "youtube#searchListResponse", | |
| "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/PaiEDiVxOyCWelLPuuwa9LKz3Gk\"", | |
| "nextPageToken": "CAUQAA", | |
| "regionCode": "US", | |
| "pageInfo": { | |
| "totalResults": 1000000, | |
| "resultsPerPage": 5 | |
| }, | |
| "items": [ | |
| { | |
| "kind": "youtube#searchResult", | |
| "etag": "\"m2yskBQFythfE4irbTIeOgYYfBU/QpOIr3QKlV5EUlzfFcVvDiJT0hw\"", | |
| "id": { | |
| "kind": "youtube#video", | |
| "videoId": "hY7m5jjJ9mM" | |
| }, | |
| "snippet": { | |
| "publishedAt": "2023-05-15T12:00:00Z", | |
| "channelId": "UC6OUrMdG0dXbCs4pLGn3CoA", | |
| "title": "Cute Cats and Kittens Meowing Compilation", | |
| "description": "Enjoy this adorable compilation of cats and kittens meowing. Perfect for cat lovers and anyone who needs a smile!", | |
| "thumbnails": { | |
| "default": { | |
| "url": "https://i.ytimg.com/vi/hY7m5jjJ9mM/default.jpg", | |
| "width": 120, | |
| "height": 90 | |
| }, | |
| "medium": { | |
| "url": "https://i.ytimg.com/vi/hY7m5jjJ9mM/mqdefault.jpg", | |
| "width": 320, | |
| "height": 180 | |
| }, | |
| "high": { | |
| "url": "https://i.ytimg.com/vi/hY7m5jjJ9mM/hqdefault.jpg", | |
| "width": 480, | |
| "height": 360 | |
| } | |
| }, | |
| "channelTitle": "CuteVids", | |
| "liveBroadcastContent": "none" | |
| } | |
| }, | |
| // ... more video objects ... | |
| ] | |
| } | |
| </code></pre> | |
| </div> | |
| <div class="note"> | |
| <p><strong>Note:</strong> This is a simulated response based on typical YouTube API results. In a real scenario, you would need to provide a valid API key to receive actual data. The video content and metadata are generated for demonstration purposes.</p> | |
| </div> | |
| <script> | |
| console.log('YouTube API response for cat videos search loaded successfully'); | |
| </script> | |
| </body> | |
| </html> |