<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>YouTube Video Downloader</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="container">

        <h2>YouTube Video Downloader</h2>

        <input type="text" id="videoUrl" placeholder="Paste YouTube video URL here...">

        <button onclick="downloadVideo()">Download</button>

        <div id="message"></div>

    </div>


    <script src="script.js"></script>

</body>

</html>

.container {
    max-width: 500px;
    margin: 50px auto;
    text-align: center;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#message {
    margin-top: 20px;
    color: #333;
}
function downloadVideo() {
    var videoUrl = document.getElementById('videoUrl').value;
    var messageDiv = document.getElementById('message');
    
    // Validation: Check if the input field is not empty
    if (videoUrl.trim() === '') {
        messageDiv.innerText = 'Please enter a valid YouTube video URL.';
        return;
    }

    // Constructing the download link
    var downloadLink = 'https://www.ssyoutube.com/watch?v=' + videoUrl.split('v=')[1];

    // Displaying the download link
    messageDiv.innerHTML = '<a href="' + downloadLink + '" target="_blank">Download Video</a>';
}

Comments

Post a Comment