Outils d'archivage et de vidéo de YouTube Wayback

619 gwetrdagfswgff

Ouvrir dans l'éditeur Publiez votre code

Outils d'archivage et de vidéo de YouTube Wayback

Recommandé

22 December 2024

annuaires de voitures

23 May 2025

Un code de Skyrreum

28 August 2025

Atilla Demir : développeur Web, concepteur et blog créatif

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Wayback & Video Helper</title>
    <style>
        :root {
            --primary: #ff0000;
            --secondary: #282828;
            --accent: #00a8ff;
            --bg: #f9f9f9;
            --text: #333;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

.container {
            background: white;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
            text-align: center;
        }

h1 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--secondary);
        }

.input-group {
            margin-bottom: 1.5rem;
        }

input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

input[type="text"]:focus {
            border-color: var(--primary);
            outline: none;
        }

.button-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

button {
            padding: 12px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: opacity 0.2s;
            color: white;
        }

.btn-save { background-color: #007bff; }
        .btn-archive { background-color: #6c757d; }
        .btn-convert { background-color: #28a745; }
        .btn-timestamp { background-color: #ffc107; color: #333; }

button:hover {
            opacity: 0.9;
        }

.full-width {
            grid-column: span 2;
            margin-top: 10px;
        }

.footer {
            margin-top: 1.5rem;
            font-size: 0.8rem;
            color: #888;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>YouTube Tools & Archive</h1>
    
    <div class="input-group">
        <input type="text" id="videoUrl" placeholder="Paste YouTube URL here...">
    </div>

<div class="button-grid">
        <button class="btn-save" onclick="action('save')">Save to Wayback</button>
        <button class="btn-archive" onclick="action('view')">View History</button>
        <button class="btn-timestamp" onclick="action('timestamp')">Add Time (0s)</button>
        <button class="btn-convert" onclick="action('convert')">Convert Video</button>
        <button class="btn-save full-width" style="background-color: var(--secondary);" onclick="clearInput()">Clear</button>
    </div>

<div class="footer">
        Enter a URL to archive metadata or redirect to conversion services.
    </div>
</div>

switch(type) {
            case 'save':
                // Wayback Machine Save API
                window.open(`https://web.archive.org/save/${url}`, '_blank');
                break;
            case 'view':
                // Wayback Machine Search
                window.open(`https://web.archive.org/web/*/${url}`, '_blank');
                break;
            case 'convert':
                // Redirects to a common conversion logic (adding 'pp' to youtube.com)
                let convUrl = url.replace('youtube.com', 'youtubepp.com').replace('youtu.be/', 'youtubepp.com/watch?v=');
                window.open(convUrl, '_blank');
                break;
            case 'timestamp':
                // Adds a basic t=0s parameter if not present
                if (!url.includes('t=')) {
                    const separator = url.includes('?') ? '&' : '?';
                    document.getElementById('videoUrl').value = url + separator + 't=0s';
                }
                break;
        }
    }

function clearInput() {
        document.getElementById('videoUrl').value = '';
    }
</script>

</body>
</html>

CSS