Untitled

<body>
            <label for="code">Url de partage de la video</label><br />
            <!-- Recuperation de l'id de la video-->
            <input type="text" name="code" value="https://www.youtube.com/watch?v=3-tNvhWtecQ" id="code" />
            <input type="submit" name="sub" onclick="getId()"   id="sub" value="envoi"/>
            <div id="imgTarget" style="display: none">
                <img class="img" />
                <ul>
                    <li class="id"></li>
                    <li class="title"></li>
                    <li class="date"></li>
                    <li class="viewCount"></li>
                </ul>
            </div>

    <script>
            function getId() {
                    var id = $('#code').val();
                    var videoid = id.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);

                    var videoInfo = (function() {
                        function videoThumb(url, callback){
                            var xmlhttp = new XMLHttpRequest();
                            xmlhttp.onreadystatechange = function() {
                                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                                    var data = JSON.parse(xmlhttp.responseText);
                                    callback(data);
                                }
                            }
                            xmlhttp.open("GET", url, true);
                            xmlhttp.send();
                        }
                        return {
                            videoThumb: videoThumb
                        }
                    }());

                    videoInfo.videoThumb( "https://www.googleapis.com/youtube/v3/videos?part=statistics, snippet&id="+videoid+"&key=AIzaSyAKqKs_2XyJecf5P63aD0lJLv4flqWU_5U",
                        function(data){
                            console.log(data);

                            $('#imgTarget').show();
                            $('.img').attr('src', data.items[0].snippet.thumbnails.default.url);
                            $('.id').html('ID de la video : ' + data.items[0].id);
                            $('.title').html('Titre de la video : ' + data.items[0].snippet.title);
                            $('.date').html('Date de creation : ' + data.items[0].snippet.publishedAt);
                            $('.viewCount').html('Nombre de vue : ' + data.items[0].statistics.viewCount);


                }
                )
            }


            //on explode l'url pour recuperer que l'id


    </script>
    </body>