59 lines
3.6 KiB
HTML
59 lines
3.6 KiB
HTML
|
<!-- ═══════════════ YOUTUBE ═══════════════ -->
|
||
|
|
<div class="page" id="page-youtube">
|
||
|
|
<button class="back-btn" onclick="showPage('home')">← Back to Tools</button>
|
||
|
|
<div class="section-header">
|
||
|
|
<h2><i class="fab fa-youtube" style="color:var(--red)"></i> YouTube Tool</h2>
|
||
|
|
<p>Extract metadata, thumbnails, and embed codes from any YouTube video.</p>
|
||
|
|
</div>
|
||
|
|
<div style="max-width:720px;">
|
||
|
|
<div class="panel-label">YouTube URL</div>
|
||
|
|
<div style="display:flex;gap:10px;">
|
||
|
|
<input type="url" id="ytInput" placeholder="https://www.youtube.com/watch?v=..." />
|
||
|
|
<button class="btn btn-red" onclick="fetchYouTube()"><i class="fas fa-search"></i> Fetch</button>
|
||
|
|
</div>
|
||
|
|
<div class="status" id="ytStatus"></div>
|
||
|
|
<div class="yt-result" id="ytResult">
|
||
|
|
<img class="yt-thumb" id="ytThumb" src="" alt="Thumbnail" />
|
||
|
|
<div class="yt-info">
|
||
|
|
<h3 id="ytTitle"></h3>
|
||
|
|
<div class="author">by <a id="ytAuthor" href="#" target="_blank"></a></div>
|
||
|
|
<div class="panel-label">Thumbnail URLs (click to copy)</div>
|
||
|
|
<div style="display:flex;flex-direction:column;gap:4px;margin-bottom:14px;">
|
||
|
|
<code id="ytThumbMax" style="font-size:0.75rem;color:var(--cyan);word-break:break-all;cursor:pointer;" onclick="copyText(this.textContent)"></code>
|
||
|
|
<code id="ytThumbHQ" style="font-size:0.75rem;color:var(--cyan);word-break:break-all;cursor:pointer;" onclick="copyText(this.textContent)"></code>
|
||
|
|
</div>
|
||
|
|
<div class="panel-label">Embed Code</div>
|
||
|
|
<textarea id="ytEmbed" readonly style="min-height:50px;font-size:0.75rem;margin-bottom:12px;"></textarea>
|
||
|
|
<div class="yt-links">
|
||
|
|
<button class="btn btn-primary btn-sm" onclick="copyOutput('ytEmbed')"><i class="fas fa-copy"></i> Copy Embed</button>
|
||
|
|
<a id="ytWatch" class="btn btn-secondary btn-sm" href="#" target="_blank" style="text-decoration:none;"><i class="fas fa-external-link-alt"></i> YouTube</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="api-usage">
|
||
|
|
<button class="api-usage-toggle" onclick="toggleApiUsage(this)"><span><i class="fas fa-terminal"></i> API Usage <span class="badge">REST</span></span><i class="fas fa-chevron-down"></i></button>
|
||
|
|
<div class="api-usage-body">
|
||
|
|
<div class="api-baseurl-note">All examples use <code>BASE_URL</code> — set it to your deployment URL.</div>
|
||
|
|
<div class="api-endpoint">
|
||
|
|
<span class="api-method post">POST</span><span class="api-path">/api/youtube/info</span>
|
||
|
|
<div class="api-desc">Extract metadata, thumbnails, and embed info from a YouTube video.</div>
|
||
|
|
<div class="api-code"><button class="api-code-copy" onclick="copyApiCode(this)">Copy</button><span class="kw">const</span> <span class="var">BASE_URL</span> = <span class="str">"http://localhost:3000"</span>;
|
||
|
|
|
||
|
|
<span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(<span class="var">`${BASE_URL}/api/youtube/info`</span>, {
|
||
|
|
method: <span class="str">"POST"</span>,
|
||
|
|
headers: { <span class="str">"Content-Type"</span>: <span class="str">"application/json"</span> },
|
||
|
|
body: JSON.<span class="fn">stringify</span>({
|
||
|
|
url: <span class="str">"https://www.youtube.com/watch?v=dQw4w9WgXcQ"</span>
|
||
|
|
})
|
||
|
|
});
|
||
|
|
<span class="kw">const</span> data = <span class="kw">await</span> res.<span class="fn">json</span>();
|
||
|
|
<span class="cm">// → { success: true, videoId: "dQw4w9WgXcQ", title: "...",
|
||
|
|
// author: "...", thumbnail: "https://img.youtube.com/...",
|
||
|
|
// embedUrl: "https://youtube.com/embed/...", ... }</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|