|
|
<!DOCTYPE html> |
|
|
<html lang="ja"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>YouTubeζ€η΄’η΅ζεεΎ</title> |
|
|
<style> |
|
|
.grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 16px; |
|
|
padding: 16px; |
|
|
} |
|
|
.tile { |
|
|
border: 1px solid #ccc; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
padding: 8px; |
|
|
text-align: center; |
|
|
} |
|
|
.thumbnail { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
} |
|
|
.channel-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.title { |
|
|
font-size: 16px; |
|
|
font-weight: bold; |
|
|
margin: 8px 0; |
|
|
} |
|
|
.info { |
|
|
font-size: 14px; |
|
|
color: #666; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<input type="text" id="query" placeholder="ζ€η΄’γ―γΌγγε
₯ε"> |
|
|
<button onclick="fetchResults()">ζ€η΄’</button> |
|
|
<div id="results" class="grid"></div> |
|
|
|
|
|
<script> |
|
|
async function fetchResults() { |
|
|
const query = document.getElementById('query').value; |
|
|
if (!query) { |
|
|
alert("ζ€η΄’γ―γΌγγε
₯εγγ¦γγ γγγ"); |
|
|
return; |
|
|
} |
|
|
const url = `https://api.codetabs.com/v1/proxy?quest=https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`; |
|
|
|
|
|
try { |
|
|
const response = await fetch(url); |
|
|
const text = await response.text(); |
|
|
|
|
|
const match = text.match(/<script nonce="[^"]+">var ytInitialData = (.*?);<\/script>/); |
|
|
if (!match) { |
|
|
document.getElementById('results').innerHTML = "γγΌγΏγθ¦γ€γγγΎγγγ§γγγ"; |
|
|
return; |
|
|
} |
|
|
|
|
|
const jsonData = JSON.parse(match[1]); |
|
|
const results = jsonData.contents?.twoColumnSearchResultsRenderer?.primaryContents?.sectionListRenderer?.contents[0]?.itemSectionRenderer?.contents; |
|
|
|
|
|
if (!results) { |
|
|
document.getElementById('results').innerHTML = "ζ€η΄’η΅ζγθ¦γ€γγγΎγγγ§γγγ"; |
|
|
return; |
|
|
} |
|
|
|
|
|
const videoResults = results.filter(item => item.videoRenderer).map(item => item.videoRenderer); |
|
|
|
|
|
document.getElementById('results').innerHTML = videoResults.map(video => { |
|
|
const videoId = video.videoId; |
|
|
const title = video.title?.runs[0]?.text || "γΏγ€γγ«γͺγ"; |
|
|
const thumbnail = video.thumbnail?.thumbnails.sort((a, b) => b.width - a.width)[0]?.url || ""; |
|
|
const lengthText = video.lengthText?.simpleText || ""; |
|
|
const viewCount = video.viewCountText?.simpleText || ""; |
|
|
const channelIcon = video.channelThumbnailSupportedRenderers?.channelThumbnailWithLinkRenderer?.thumbnail?.thumbnails[0]?.url || ""; |
|
|
return ` |
|
|
<div class="tile"> |
|
|
<a href="https://www.youtube.com/watch?v=${videoId}" target="_blank"> |
|
|
<img class="thumbnail" src="${thumbnail}" alt="${title}"> |
|
|
</a> |
|
|
<div class="title">${title}</div> |
|
|
<div class="info">${lengthText} γ» ${viewCount}</div> |
|
|
<div> |
|
|
${channelIcon ? `<img class="channel-icon" src="${channelIcon}" alt="γγ£γ³γγ«">` : ""} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}).join(''); |
|
|
} catch (error) { |
|
|
document.getElementById('results').innerHTML = "γ¨γ©γΌγηΊηγγΎγγ: " + error.message; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
