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

505 gwetrdagfswgff

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

19 May 2025

Projet de shader WebGL

1 June 2025

Diagramme de Venn animé

31 July 2025

Le chuchoteur de codes

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