Last active
July 29, 2025 21:00
-
-
Save ZeroOne3010/07d63fa93101f83d8890757fc9e53373 to your computer and use it in GitHub Desktop.
Takes a YouTube link and converts it into an embeddable <iframe> code and copies it to the clipboard.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>YouTube Embed Generator</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| padding: 1em; | |
| max-width: 600px; | |
| margin: auto; | |
| } | |
| input, button, textarea { | |
| width: 100%; | |
| font-size: 1.1em; | |
| margin: 0.5em 0; | |
| padding: 0.5em; | |
| } | |
| button { | |
| background: #cc0000; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .success { | |
| color: green; | |
| margin-top: 0.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>YouTube Embed Generator</h1> | |
| <label for="yt-url">Paste YouTube link:</label> | |
| <input type="text" id="yt-url" placeholder="https://youtu.be/... or https://youtube.com/watch?v=..."> | |
| <button onclick="convert()">Convert & Copy</button> | |
| <textarea id="output" rows="5" readonly></textarea> | |
| <div id="message" class="success"></div> | |
| <script> | |
| function extractVideoId(url) { | |
| try { | |
| const parsed = new URL(url); | |
| if (parsed.hostname.includes('youtu.be')) { | |
| return parsed.pathname.slice(1); | |
| } else if (parsed.hostname.includes('youtube.com')) { | |
| return parsed.searchParams.get('v'); | |
| } | |
| } catch (e) { | |
| return null; | |
| } | |
| return null; | |
| } | |
| function convert() { | |
| const inputEl = document.getElementById('yt-url'); | |
| const input = inputEl.value.trim(); | |
| const videoId = extractVideoId(input); | |
| const output = document.getElementById('output'); | |
| const message = document.getElementById('message'); | |
| if (!videoId) { | |
| output.value = ''; | |
| message.textContent = 'Invalid YouTube link.'; | |
| return; | |
| } | |
| const iframe = `<iframe width="640" height="360" src="https://www.youtube.com/embed/${videoId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>`; | |
| output.value = iframe; | |
| // Try copying to clipboard | |
| navigator.clipboard.writeText(iframe) | |
| .then(() => { | |
| message.textContent = 'Copied embed code to clipboard!'; | |
| inputEl.value = ''; | |
| }) | |
| .catch(() => { | |
| message.textContent = 'Embed code generated, but clipboard copy failed.'; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Author
Author
This was, by the way, completely vibe coded with ChatGPT.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This script in action: https://gistpreview.github.io/?07d63fa93101f83d8890757fc9e53373