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

28 gwetrdagfswgff

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

20 October 2023

Astuce de capture de la souris avec JS

25 August 2024

Découverte des produits d'animation d'interface utilisateur

19 November 2025

Metehan

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>

Recommandé

Astuce de capture de la souris avec JS

Découverte des produits d'animation d'interface utilisateur

Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS