jQuery YouTube Search Engine

index.html

<div id="container">
    <header>
        <h1>Search <span>Vids</span></h1>
        <p>Search all YouTube Videos</p>
    </header>
    <section>
        <form id="search-form" name="search-form" onsubmit="return search()">
            <div class="fieldcontainer">
                <input type="search" id="query" class="search-field" placeholder="Search YouTube">
                <input type="submit" name="search-btn" id="search-btn" value="">
            </div>
        </form>
        
        <ul id="results"></ul>
        <div id="buttons"></div>
    </section>
    <footer>Copyright, &copy; 2015</footer>
</div>

jQuery YouTube Search Engine.markdown

jQuery YouTube Search Engine

A YouTube search engine using YouTube API, jQuery .get(), and Fancybox

A Pen by Tim Ivey on CodePen.

License.

script.js

var gapikey = 'AIzaSyCKMpw2nmPnon_gkh4EIXnbiAmrZNw-v4M';

$(function() {
    
    // call fancybox pluggin (note: linked in in codepen js settings)
    $(".fancyboxIframe").fancybox({
        maxWidth	: 900,
        maxHeight	: 600,
        fitToView	: false,
        width		: '90%',
        height		: '90%',
        autoSize	: false,
        closeClick	: false,
        openEffect	: 'none',
        closeEffect	: 'none',
        iframe: {
            scrolling : 'auto',
            preload   : true
        }
    });
    
    var searchField = $('#query');
    var icon = $('#search-btn');
    
    //Focus event handler
    $(searchField).on('focus', function() {
        $(this).animate({
            width: '90%'
        }, 400);
        $(icon).animate({
            right: '21px'
        }, 400);
    });
    
    // Blur event handler
    $(searchField).on('blur', function() {
 		if(searchField.val() == '') {
            $(searchField).animate({
                width: '45%'
            }, 400, function(){});
            $(icon).animate({
                right: '304px'
            }, 400, function(){});
        }
    }); 
    
    $('#search-form').submit( function(e) {
        e.preventDefault();
    });
});

function search() {
    // clear 
    $('#results').html('');
    $('#buttons').html('');
    
    // get form input
    q = $('#query').val();  // this probably shouldn't be created as a global
    
    // run get request on API
    $.get(
    	"https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            type: 'video',
            key: gapikey
        }, function(data) {
            var nextPageToken = data.nextPageToken;
            var prevPageToken = data.prevPageToken;
            
            // Log data
            console.log(data);
            
            $.each(data.items, function(i, item) {
                
                // Get Output
                var output = getOutput(item);
                
                // display results
                $('#results').append(output);
            });
            
            var buttons = getButtons(prevPageToken, nextPageToken);
            
            // Display buttons
            $('#buttons').append(buttons);
        });
}

// Next page function
function nextPage() {
    var token = $('#next-button').data('token');
    var q = $('#next-button').data('query');
    
    
   // clear 
    $('#results').html('');
    $('#buttons').html('');
    
    // get form input
    q = $('#query').val();  // this probably shouldn't be created as a global
    
    // run get request on API
    $.get(
    	"https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            pageToken: token,
            type: 'video',
            key: gapikey
        }, function(data) {
            
            var nextPageToken = data.nextPageToken;
            var prevPageToken = data.prevPageToken;
            
            // Log data
            console.log(data);
            
            $.each(data.items, function(i, item) {
                
                // Get Output
                var output = getOutput(item);
                
                // display results
                $('#results').append(output);
            });
            
            var buttons = getButtons(prevPageToken, nextPageToken);
            
            // Display buttons
            $('#buttons').append(buttons);
        });    
}

// Previous page function
function prevPage() {
    var token = $('#prev-button').data('token');
    var q = $('#prev-button').data('query');
    
    
   // clear 
    $('#results').html('');
    $('#buttons').html('');
    
    // get form input
    q = $('#query').val();  // this probably shouldn't be created as a global
    
    // run get request on API
    $.get(
    	"https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            pageToken: token,
            type: 'video',
            key: gapikey
        }, function(data) {
            
            var nextPageToken = data.nextPageToken;
            var prevPageToken = data.prevPageToken;
            
            // Log data
            console.log(data);
            
            $.each(data.items, function(i, item) {
                
                // Get Output
                var output = getOutput(item);
                
                // display results
                $('#results').append(output);
            });
            
            var buttons = getButtons(prevPageToken, nextPageToken);
            
            // Display buttons
            $('#buttons').append(buttons);
        });    
}

// Build output
function getOutput(item) {
    var videoID = item.id.videoId;
    var title = item.snippet.title;
    var description = item.snippet.description;
    var thumb = item.snippet.thumbnails.high.url;
    var channelTitle = item.snippet.channelTitle;
    var videoDate = item.snippet.publishedAt;
    
    // Build output string
    var output = 	'<li>' +
        				'<div class="list-left">' +
        					'<img src="' + thumb + '">' +
        				'</div>' +
        				'<div class="list-right">' +
        					'<h3><a data-fancybox-type="iframe" class="fancyboxIframe" href="http://youtube.com/embed/' + videoID + '?rel=0">' + title + '</a></h3>' +
        					'<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +
        					'<p>' + description + '</p>' +
        				'</div>' +
        			'</li>' +
        			'<div class="clearfix"></div>' +
        			'';
    return output;
}

function getButtons(prevPageToken, nextPageToken) {
    if(!prevPageToken) {
        var btnoutput = 	'<div class="button-container">' +
            					'<button id="next-button" class="paging-button" data-token="' + nextPageToken + '" data-query="' + q + '"' +
            						'onclick = "nextPage();">Next Page</button>' +
            				'</div>';
    } else {
        var btnoutput = 	'<div class="button-container">' +
								'<button id="prev-button" class="paging-button" data-token="' + prevPageToken + '" data-query="' + q + '"' +
            						'onclick = "prevPage();">Prev Page</button>' +            
            					'<button id="next-button" class="paging-button" data-token="' + nextPageToken + '" data-query="' + q + '"' +
            						'onclick = "nextPage();">Next Page</button>' +
            				'</div>';        
    }
    
    return btnoutput;
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

style.css

body {
    font-family: "Segoue", sans-serif;
    line-height: 1.6em;
    color: #666;
    background: #e1e1e1 url('http://timivey.com/external/codepen/youtube-search-engine/images/creampaper.png');
    font-size: 14px;
}

a {
    color: #666;
    text-decoration: none;
}

#container {
    width: 740px;
    background: #fff;
    margin: auto;
}

.clearfix {
    clear:both;
}

header {
    padding: 30px 20px;
    background: #f4f4f4;
}

header h1 {
    color: black;
    margin-bottom: 5px;
}

header span {
    color: #dd2826;
}

section {
    padding: 30px 20px 20px 20px;
}

footer {
    padding: 20px;
    background: #f4f4f4;
    text-align: center;
}

#search-form {
    display: block;
    margin-bottom: 15px;
}

.fieldcontainer {
    display: block;
    position: relative;
    width: 90%;
    margin: 0 auto;
}
.search-field {
    moz-box-sizing: border-box;
    webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 45%;
    padding: 11px 7px;
    padding-right: 43px;
    background: #fff;
    color: #ccc;
    border: 1px solid #c8c8c8;
    font-size: 1.6em;
    border-bottom-color: #d2e2e7;
    moz-border-radius: 1px;
    webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
    -wbekit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0;
}

#search-btn {
    position: absolute;
    right: 304px;
    top: 5px;
    height: 32px;
    width: 32px;
    border: 0;
    cursor: pointer;
    zoom: 1;
    filter: alpha(opacity=65);
    opacity: 0.65;
    background: transparent url('http://timivey.com/external/codepen/youtube-search-engine/images/search.png') top left no-repeat; 
}

#search-btn:hover {
    filter: alpha(opacity=90);
    opacity: 0.9;
}

#results li {
    padding: 10px 0;
    border-bottom: 1px dotted #ccc;
    list-style: none;
    overflow: auto;
}
.list-left {
    float: left;
    width: 20%;
}
.list-left img {
    width: 100%;
    padding: 3px;
    border: 1px solid #ccc;
}
.list-right {
    float: right;
    width: 78%;
}
.list-right h3 {
    margin: 0;
}
.list-right p {
    margin: 0;
}

.cTitle {
    color: #dd2826;
}

.button-container {
    margin-top: 25px;
    
}

.paging-button {
    background: #f4f4f4;
    padding: 0 13px;
    border: #ccc 1px solid;
    border-radius: 5px;
    color: #333;
    margin: 10px;
    cursor: pointer;
}

styles

<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" />