YouTube Lite

<!DOCTYPE html>
<html>
    <head>
    <title>YouTube Lite</title>
    <div id="iframe"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <br>
        <button id="change_quality">Change Quality</button>
        <br><br>
        <div id="player"></div><br><br>
        <form id="search-form" name="search-form"><button id="search-button" onclick="return search()">Search</button>
        <input type="search" id="search-input" class="search-input" placeholder="">
        </form>
        <ul id="results"></ul>
        <script>
            // https://www.youtube.com/watch?v=Bb-hoFcbT3c
            // ZZZ <form id="search-form" name="search-form"><button id="search-button" onclick="return search()">Search</button>

            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            var player;


            $(document).ready(function () {

                $('#TextBoxURL').change(function () {
                    var youTubeUri = $('#TextBoxURL').val();
                    var youTubeVideoId = get_youtubeId(youTubeUri);
                    loadYouTubeVideo(youTubeVideoId);
                });
            });

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


            function onYouTubeIframeAPIReady(youTubeVideoId) {
                player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: "Bb-hoFcbT3c",
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
                });
            }
            function onPlayerReady(event) {
                event.target.playVideo();
                event.target.setPlaybackQuality('144p');
            }
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING) {
                    $("#change_quality").click(function() {
                        event.target.setPlaybackQuality('240p');
                    });
                }
            }

            var apikey = 'AIzaSyDYwPzLevXauI-kTSVXTLroLyHEONuF9Rw';

            $(function() {
                var searchField = $('#search-input');

                $('#search-form').submit(function(e) {
                    e.preventDefault();
                });

                /* Alert VideoID */
                $('#results').on('click','img[data-videoId]',function() {
                    alert($(this).attr('data-videoId'));
                });
                /* End Alert VideoID */

            });

            function search() {
                $('#results').html('');

                q = $('#search-input').val();

                $.get(
                    "https://www.googleapis.com/youtube/v3/search", {
                        part: 'snippet, id',
                        q: q,
                        maxResults: 50,
                        type: 'video',
                        key: apikey
                    },
                    function(data) {
                        $.each(data.items, function(i, item) {
                            var output = getResults(item);

                            $('#results').append(output);
                        });
                    });
            }

            // ZZZ ??? reload video at top to play the result

            function getResults(item) {
                var videoID = item.id.videoId;
                var title = item.snippet.title;
                var thumb = item.snippet.thumbnails.high.url;
                var channelTitle = item.snippet.channelTitle;
                var videoID = item.id.videoId;

                var output = '<li>' +
                    '<div class="list-left">' +
                    '<img data-videoId="' + videoID + '" src="' + thumb + '">' +
                    '</div>' +
                    '<div class="list-right">' +
                    '<h3>' + title + '</h3>' +
                    '<p class="cTitle">' + channelTitle + '</p>' +
                    '</div>' +
                    '</li>' +
                    '<div class="clearfix"></div>' +
                    '';

                return output;
            }
        </script>
    </body>
</html>