Video-Viewer

Description

This code is made to play the video by link.

Code

HTML index.html


<!DOCTYPE html>
<html>
<head>
    <title>Open video with link | By Mr.Miner</title>

    <link rel="icon" href="http://miner-site.rf.gd/pc/main/M-W.png" type="image/png">

    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="js" href="script.js" type="text/js">
</head>
<html>
    <body>
        <button onclick="toggleColorMode()" class="emoji-button">🌙</button>
        <div class="centered-text">
            <div>
                <form action="#" method="get">
                    <input type="url" id="videoLink" name="videoLink" placeholder="Paste the video link:">
                    <button class="button" id="myButton" type="submit">Play</button>
                    <button class="button" id="copy" type="submit">copy</button>
                </form>
            </div>
            
            <h4></h4>

            <div id="videoContainer"></div>

            <h4></h4>

            <div>
                <button class="b" id="yourButton" type="button" onclick="downloadVideo()">Download link</button>
            </div><br>
        </div>
        <footer>
            <div class="centered-text">
                <p class="sf25">By Mr.Miner</p>

                <p class="sf20"><a target="_blank" href="https://github.com/Mr0Miner/Video-Viewer">Source code</a></p>

                <p class="sf20"><a target="_blank" href="https://discord.gg/mAMkpe6nGH"> Discord </a></p>
            </div>
        </footer>
        <script src="script.js"></script>
    </body>
</html>

CSS style.css


h3 {
    font-size: large;
    font-weight: bold;
    color: #121FCF;
}

h1{
    font-family: "B Koodak";
    font-size: 65px;
}

img {
    width: 500px;
}

p {
    margin: 0;
    font-weight: bold;
    background: #121FCF;
    background: -webkit-linear-gradient(to right, #121FCF 0%, #CF1512 100%);
    background: -moz-linear-gradient(to right, #121FCF 0%, #CF1512 100%);
    background: linear-gradient(to right, #121FCF 0%, #CF1512 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.sf25 {font-size: 25px;}
.sf20 {font-size: 20px;}

.centered-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Comic Sans MS";
    line-height: inherit;
}
input {
    font-family: inherit;
    line-height: inherit;
    width: 1000px;
    padding: 10px 20px;
}
.button {
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    background-color: #ffffff;
    padding: 10px 20px;
    border: 2px solid #222;
    color: #000000;
    text-transform: uppercase;
    transition: .2s background-color ease;
    font-size: 13px;
    font-weight: 600;
    border-radius: 15%;
}
.button:hover,
.button:active,
.button:focus {
    font-family: inherit;
    line-height: inherit;
    background-color: #222;
    padding: 10px 20px;
    border: 2px solid #222;
    color: #fff;
    text-transform: uppercase;
    transition: .2s background-color ease;
    font-size: 13px;
    font-weight: 600;
    border-radius: 15%;
}

.b {
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    background-color: #ffffff;
    padding: 10px 20px;
    border: 2px solid #222;
    color: #000000;
    text-transform: uppercase;
    transition: .2s background-color ease;
    font-size: 13px;
    font-weight: 600;
    border-radius: 15%;
}
.b:hover,
.b:active,
.b:focus {
    font-family: inherit;
    line-height: inherit;
    background-color: #222;
    padding: 10px 20px;
    border: 2px solid #222;
    color: #fff;
    text-transform: uppercase;
    transition: .2s background-color ease;
    font-size: 13px;
    font-weight: 600;
    border-radius: 15%;
}
.day-mode {
    background-color: white;
    color: black;
}
.night-mode {
    background-color: rgb(35, 35, 35);
    color: white;
}
.emoji-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

JS script.js


let videoLink = "";

document.querySelector("form").addEventListener("submit", function(event) {
    event.preventDefault();
    videoLink = document.getElementById("videoLink").value;
    const videoContainer = document.getElementById("videoContainer");
    
    const video = document.createElement("video");
    video.src = videoLink;
    video.autoplay = true;
    video.controls = true;

    videoContainer.innerHTML = "";
    videoContainer.appendChild(video);
});

function downloadVideo() {
    if (videoLink) {
        const downloadLink = document.createElement("a");
        downloadLink.href = videoLink;
        downloadLink.download = "video.mp4";
        downloadLink.click();
    } else {
        alert("Please enter the link first and press the play button.");
    }
}

function copyText() {
    const input = document.getElementById("videoLink");
    
    if (input.value) {
        input.select();
        input.setSelectionRange(0, 99999);
        document.execCommand("copy");
    } else {
        alert("Please enter the video link first.");
    }
}

function toggleColorMode() {
    const body = document.body;
    const button = document.querySelector(".emoji-button");
    if (body.classList.contains("night-mode")) {
        body.classList.remove("night-mode");
        button.textContent = "🌙";
    } else {
        body.classList.add("night-mode");
        button.textContent = "☀️";
    }
}

Related Images

can't load image can't load image

Tags