Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>title</title>
    </head>
    <body>
        <input type="text" />
        <br>
        <img/>
        <script>
            function url_to_vid(url) {
                let vid = null;
                try{
                    if(url.includes("youtu.be/")){
                        // get the part after youtu.be/ and before '?' (if applicable)
                        let chunks = url.split('youtu.be/');
                        let chunks2 = chunks[1].split('?');
                        vid = chunks2[0]; // note: if there's no '?' we still get an array with 1 item, namely video id
                    } else if (url.includes("youtube")) {
                        let chunks = url.split('v=');
                        let chunks2 = chunks[1].split('&');
                        vid = chunks2[0]; // ditto
                    } else {
                        alert('unknown url format');
                    }
                } catch (e){
                    alert('error: ' + e);
                }
                return vid;
            }
            function vid_to_thumb_url(vid) {
                return `https://img.youtube.com/vi/${vid}/sddefault.jpg`;
            }
            function update(e) {
                let url = e.target.value;
                let vid = url_to_vid(url);
                console.log(vid)
                let thumb_url = vid_to_thumb_url(vid);
                console.log(thumb_url   )
                document.querySelector('img').src = thumb_url;
            }
            document.querySelector('input').addEventListener('input', update);
        </script>
    </body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers