Youtube Zaman Damgalı Embed Oluşturucu

Youtube videoları için özel zaman damgalı (timestamp) bir embed kodu oluşturucu hazırladım. Bu araç, kullanıcının bir URL girmesini, videonun hangi saniyede başlayıp biteceğini belirlemesini ve sonucu anında önizlemesini sağlar. Bu kod ve yazı kendim içindir. 

<style>
 .container {
 padding: 2rem;
 max-width: 600px;
 width: 100%;
 }
 .input-group { margin-bottom: 15px; }
 label {
display: block;
margin-bottom: 5px;
 font-weight: bold;
}
 input {
 width: 100%;
 padding: 10px;
 border: 1px solid #ddd;
 border-radius: 6px;
 box-sizing: border-box;
 }
 .controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
button {
width: 100%;
padding: 12px;
background-color: var(--color-primary);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
 }
button:hover {
background-color: var(--color-brand);
color:var(--color-primary)
 }
#preview {
margin-top: 20px;
text-align: center;
}
#result-code {
background: #282c34;
color: #61dafb;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
word-break: break-all;
font-family: monospace;
display: none;
        }
iframe { width: 100%; border-radius: 8px; }
</style>

<div class="container">
<div class="input-group">
<label>YouTube Video URL:</label>
<input type="text" id="videoUrl" placeholder="https://www.youtube.com/watch?v=XXXXX">
</div>
<div class="controls">
<div class="input-group">
<label>Başlangıç (Saniye):</label>
<input type="number" id="startTime" value="0" min="0">
</div>
<div class="input-group">
<label>Bitiş (Saniye):</label>
<input type="number" id="endTime" placeholder="Örn: 120">
</div>
</div>
<button onclick="generateEmbed()">Embed Kodu Oluştur ve Önizle</button>
<div id="preview"></div>
<div id="result-code"></div>
</div>
 <script>
        function extractVideoId(url) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        const match = url.match(regExp);
        return (match && match[2].length === 11) ? match[2] : null;
    }

        function generateEmbed() {
        const url = document.getElementById('videoUrl').value;
        const start = document.getElementById('startTime').value;
        const end = document.getElementById('endTime').value;
        const videoId = extractVideoId(url);
        
        if (!videoId) {
            alert("Lütfen geçerli bir YouTube URL'si girin.");
            return;
        }

        // YouTube Embed parametrelerini oluşturma
        // start: başlangıç saniyesi, end: bitiş saniyesi
        let embedUrl = `https://www.youtube.com/embed/${videoId}?start=${start}`;
        if (end && end > start) {
            embedUrl += `&end=${end}`;
        }

        const iframeTag = `<iframe width="560" height="315" src="${embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;

        // Önizleme ve Kod Çıktısı
        document.getElementById('preview').innerHTML = iframeTag;
        const codeElement = document.getElementById('result-code');
        codeElement.innerText = iframeTag;
        codeElement.style.display = 'block';
    }
</script>
2 Yorum