JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div>
    <input type="text" id="url">
</div>
<div id="result"></div>

JavaScript

$(function () {

    function youtube(url) {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
        var match = url.match(regExp);
        if (match && match[7].length == 11) {
            return match[7];
        } else {
            return false;
        }

    }

    $('#url').change(function () {

        var $this = $(this);
        var $result = $('#result');
        $result.text('');

        if ($this.val().indexOf('youtube.com') > -1 || $this.val().indexOf('youtu.be') > -1) {

            var new_id = youtube($this.val());

            if (new_id) {
                $result.text('youtube video: ' + new_id);
            } else {
                $result.text('Not valid youtube video');
            }



        } else {

            var ext = $this.val().split('.').pop();

            if (ext === 'mp4') {
                $result.text('Other MP4 video');
            } else {
                $result.text('NOT youtube video or valid MP4 video');
            }



        }

    });


});