Wapegoai sũa hộ minh cá đang video ra topic ik xin các ban làm hộ

**minhmon** · 02.06.2018 / 12:45

TWIG

</style></div><br><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
               <div class="title">Tìm kiếm video</div><div class="list2">
<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 type="text/css">
a {
    color: #666;
    text-decoration: none;
}
 
.list2{border:1px solid #ddd;border-bottom:2px solid #ddd;padding:2%;margin:5px;text-align:left}
 
</style>
 
 
 
<div id="container"><div class="center">
Nhập tên video muốn tìm:
        <form id="search-form" name="search-form" onsubmit="return search()">
            <div class="fieldcontainer">
                <input type="search" style="width:70%" id="query" placeholder="Tìm kiếm...">
                <input type="submit" name="search-btn" id="search-btn" value="Tìm video">
            </div>
        </form></div>
 
        <ul id="results"></ul>
        <div id="buttons"></div>
</div>
 
<script type="text/javascript">
var gapikey = 'AIzaSyCKMpw2nmPnon_gkh4EIXnbiAmrZNw-v4M';
 
$(function() {
 
    // call fancybox pluggin (note: linked in in codepen js settings)
    $(".fancyboxIframe").fancybox({
        maxWidth: 1000,
        maxHeight: 900,
        fitToView: false,
        width: '100%',
        height: '100%',
        autoSize: false,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none',
        iframe: {
            scrolling : '100%',width:'100%',
            preload   : true
        }
    });
 
    var searchField = $('#query');
    var icon = $('#search-btn');
 
    //Focus event handler
    $(searchField).on('focus', function() {
        $(this).animate({
            width: '70%'
        }, 400);
        $(icon).animate({
            right: '0px'
        }, 400);
    });
 
    // Blur event handler
    $(searchField).on('blur', function() {
 if(searchField.val() == '') {
            $(searchField).animate({
                width: '70%'
            }, 900, function(){});
            $(icon).animate({
                right: '0px'
            }, 900, 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 = '' +
        '<div style="max-width:100%"><div style="border-top:1px solid #ddd;margin-top:5px;margin-bottom:5px">' + '' +
        '<img src="' + thumb + '" style="border:1px solid #ddd;background:#fff;padding:3px;height:40%;width:40%;margin-top:2%"/>' + '' +
        '</div>' +
        '<div>' +
        '<h3><b data-fancybox-type="iframe" class="fancyboxIframe2">' + title + '</b></h3>' +
        '<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +
        '' +
        '</div>' + '<div style="text-align:right"><a href="main.php?f=255273&uid=view&video='  + videoID + '" style="color:#0099cc">Xem video</a> | code thiêu cái đang ạ ' +
        '</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;
}
</script>
</div><style>.images img{border:1px solid #ddd;padding:1px;height:30px;weight:30px}</style>