{"id":766,"date":"2022-12-05T11:57:23","date_gmt":"2022-12-05T06:27:23","guid":{"rendered":"https:\/\/awplife.com\/demo\/video-gallery-premium\/?page_id=766"},"modified":"2025-11-12T11:07:39","modified_gmt":"2025-11-12T11:07:39","slug":"vimeo-api-gallery","status":"publish","type":"page","link":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/vimeo-api-gallery\/","title":{"rendered":"Vimeo API Gallery"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center\">Fetch and Display Your Vimeo Videos<\/h2>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<style>\r\n\r\n.video_title_765 {\r\n\tfont-size: 18px !important;\r\n\tcolor: #383838  !important;\r\n\tpadding-left: 5px !important;\r\n\tpadding-right: 5px !important;\r\n}\r\n.video_desc_765 {\r\n\tfont-size: 18px !important;\r\n\tcolor: #72777C  !important;\r\n\tpadding-left: 5px !important;\r\n\tpadding-right: 5px !important;\r\n\tmargin-bottom:20px;\r\n}\r\n\r\n.single-image figure {\r\n\tmargin:0 !important;\r\n}\r\n\r\n.vg_load_more {\r\n\tbackground-color:#1e73be;\r\n\tcolor:#ffffff !important;\r\n}\r\n\r\n.video-close {\r\ndisplay: none !important;\r\n}\r\n<\/style>\r\n\r\n<style>\r\n#nev_vimeo_api_765 .yl-view-string {\r\n\t display: none !important;\r\n}\r\n#nev_vimeo_api_765 .yl-date-bucket {\r\n\t display: none !important;\r\n}\r\n#nev_vimeo_api_765 .col-lg-3:nth-child(4n+1){\r\n    clear:both\r\n} \r\n#nev_vimeo_api_765 .col-lg-4:nth-child(3n+1){\r\n    clear:both\r\n} \r\n#nev_vimeo_api_765 .col-lg-6:nth-child(2n+1){\r\n    clear:both\r\n}\r\n#nev_vimeo_api_765 .col-lg-2:nth-child(6n+1){\r\n    clear:both\r\n}\r\n#nev_vimeo_api_765 .col-lg-1:nth-child(12n+1){\r\n    clear:both\r\n}\r\n.vimeo-4-col-grid_765 {\r\n    margin-bottom:2%\r\n}\r\n\r\n#nev_vimeo_api_765 .vm-description_765 {\r\n    overflow: hidden;\r\n\tcolor:#72777C; \r\n    height: auto;\r\n\tfont-family: B612;\r\n    font-weight: 300;\r\n    font-size: 18px;\r\n    line-height: 1.5em;\r\n    max-height: 6em;\r\n}\r\n#nev_vimeo_api_765  .vm-title_765 {\r\n    color: #383838; \r\n    overflow: hidden;\r\n    margin-bottom: 0.15em;\r\n    font-size: 18px;\r\n\tfont-weight: bold;\r\n    max-height: 3.1em;\r\n    line-height: 1.57em;\r\n    font-family: sans-serif;\r\n}\r\n#nev_vimeo_api_765 .vm-text_765 {\r\n\twidth: 100%;\r\n    padding: 5% 5% !important;\r\n}\r\n#nev_vimeo_api_765 .vm-play-overlay-fixed_765 {\r\n    display: block;\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    right: 0;\r\n    left: 0;\r\n    margin: auto;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: rgba(0,0,0,0);\r\n    pointer-events: none;\r\n}\r\n#nev_vimeo_api_765 .vm-play-icon-holder_765 {\r\n    color: #fff;\r\n    position: absolute;\r\n    left: 0;\r\n    right: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    margin: auto;\r\n    border: 3px solid #fff;\r\n    text-align: center;\r\n    background-color: rgba(0,0,0,.45);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n#nev_vimeo_api_765 .vm-item_765 a{\r\n   position: relative;\r\n}\r\n#nev_vimeo_api_765 .vm-item_765 {\r\n    width: 100%;\r\n    display: inline-block;\r\n    margin-bottom: 0;\r\n    background-color: #fbfbfb;\r\n    box-shadow: 0 0 2px rgb(0 0 0 \/ 20%);\r\n    text-align: left;\r\n    transition: all .2s;\r\n    -webkit-transition: all .2s;\r\n    overflow: hidden;\r\n    color: #828282;\r\n    font-family: sans-serif;\r\n    position: relative;\r\n}\r\n#nev_vimeo_api_765 .vm-play-icon-holder_765 {\r\n    width: 2.6em;\r\n    height: 2.6em;\r\n    border-radius: 100%;\r\n    padding: 0.1em 0.25em;\r\n    box-sizing: border-box;\r\n\tfont-size: 20px;\r\n}\r\n#nev_vimeo_api_765 a:hover .vm-play-icon-holder_765 {\r\n\tbackground-color: #29b6f6;\r\n}\r\n#nev_vimeo_api_765 .yl-date-bucket {\r\n    position: static;\r\n    font-weight: 400;\r\n    float: right;\r\n\tfont-size: .90em;\r\n}\r\n#nev_vimeo_api_765 .yl-date-bucket i{\r\n    color: #f00;\r\n}\r\n#nev_vimeo_api_765 .yl-view-string {\r\n\tfont-size: .90em;\r\n}\r\n<\/style>\r\n<div id=\"nev_vimeo_api_765\"><\/div> \r\n\t \r\n<script>\r\nvar accessToken = '33e40e07e4a861074df8d32c2b0d8251';\r\nvar userId = 'richardbroomhall'; \/\/ Replace with the actual user ID\r\nvar apiEndpoint = 'https:\/\/api.vimeo.com\/users\/' + userId + '\/videos';\r\nvar videosPerPage = 20; \/\/ Number of videos per request\r\nvar fetchedVideos = 0; \/\/ Counter for fetched videos\r\nvar fetchDelay = 3000; \/\/ Delay between requests in milliseconds\r\n\r\njQuery(document).ready(function() {\r\n    fetchVideos(1); \/\/ Start fetching from the first page\r\n});\r\n\r\nfunction fetchVideos(page) {\r\n    jQuery.ajax({\r\n        url: apiEndpoint,\r\n        type: 'GET',\r\n        dataType: 'json',\r\n        headers: {\r\n            'Authorization': 'Bearer ' + accessToken\r\n        },\r\n        data: {\r\n            page: page,\r\n            per_page: videosPerPage\r\n        },\r\n        success: function(response) {\r\n            var data = response.data;\r\n            if (data.length > 0) {\r\n                nevsetupGallery(data);\r\n                fetchedVideos += data.length;\r\n\r\n                \/\/ Check if there are more pages to fetch\r\n                var paging = response.paging;\r\n                if (paging.next) {\r\n                    setTimeout(function() {\r\n                        fetchVideos(page + 1);\r\n                    }, fetchDelay);\r\n                } else {\r\n                    console.log('Total videos fetched:', fetchedVideos);\r\n                }\r\n            } else {\r\n                console.log('No more videos to fetch. Total videos fetched:', fetchedVideos);\r\n            }\r\n        },\r\n        error: function(jqxhr, textStatus, error) {\r\n            console.error('Failed to fetch videos:', textStatus, error);\r\n            console.log('HTTP Status:', jqxhr.status);\r\n        }\r\n    });\r\n}\r\n\r\nfunction nevsetupGallery(videos) {\r\n    for (var i = 0; i < videos.length; i++) {\r\n        var video = videos[i];\r\n        var videoLink = video.link;\r\n        var thumbnail = video.pictures.sizes[3].link;\r\n        var title = video.name;\r\n        var description = video.description || ''; \/\/ Fallback to an empty string if description is null\r\n\t\tvar views = video.metadata.connections.comments.total || '0'; \/\/ Fallback to 'N\/A' if comments are not available \r\n        var likes = video.metadata.connections.likes.total || '0'; \/\/ Fallback to 'N\/A' if likes are not available\t\t\r\n\t\t\r\n        var html = '<div class=\"vimeo-4-col-grid_765 col-lg-3\"><div class=\"vm-item_765\"><a href=\"' + videoLink + '\" ><img decoding=\"async\" src=\"' + thumbnail + '\"  width=\"100%\" \/><div class=\"vm-play-overlay-fixed_765\"><div class=\"vm-play-icon-holder_765\"><i class=\"fa fa-youtube-play\"><\/i><\/div><\/div>';\r\n        html += '<\/a><div class=\"vm-text_765\"><div class=\"vm-title_765\">' + title + '<\/div><div class=\"vm-description_765\">' + description + '<\/div><div class=\"yl-separator-for-grid\"><\/div><div class=\"yl-view-string\"><i class=\"fa fa-comment\"><\/i> ' + views + ' <span>Comment<\/span><\/div><div class=\"yl-date-bucket\"><i class=\"fa fa-heart\"><\/i> ' + likes + ' <span>Likes<\/span><\/div><\/div><\/div><\/div>';\r\n        jQuery('#nev_vimeo_api_765').append(html);\r\n    }\r\n}\r\n\r\n\r\njQuery(document).ready(function() {\r\n    jQuery('#nev_vimeo_api_765').magnificPopup({\r\n        delegate: 'a',\r\n        type: 'iframe',\r\n        gallery: {\r\n            enabled: true,\r\n            navigateByImgClick: true,\r\n        },\r\n    });\r\n});\r\n\r\n\r\n\t\r\n<\/script><script>\r\n\r\njQuery(document).ready(function () {\r\n\t\/\/ isotope effect function\r\n\t\/\/ Method 1 - Initialize Isotope, then trigger layout after each image loads.\r\n\tvar $grid = jQuery('.all-images').isotope({\r\n\t\t\/\/ options...\r\n\t\titemSelector: '.single-image',\r\n\t});\r\n\t\/\/ layout Isotope after each image loads\r\n\t$grid.imagesLoaded().progress( function() {\r\n\t\t$grid.isotope('layout');\r\n\t});\r\n\t\r\n\t\/\/video lighting js\r\n\tvideoLightning({\r\n\t\telements: [\r\n\t\t\t{\r\n\t\t\t\t\".vid-765\": {\r\n\t\t\t\t\twidth: '700',\r\n\t\t\t\t\theight: '480',\r\n\t\t\t\t\tautoplay: true,\r\n\t\t\t\t\tautoclose: 'true',\r\n\t\t\t\t\tpopover: 'false',\r\n\t\t\t\t\tpeek: 'false',\r\n\t\t\t\t\tbdColor: '#000000',\r\n\t\t\t\t\tbdOpacity: '0.6',\r\n\t\t\t\t\tframeColor: '#000000',\r\n\t\t\t\t\tframeBorder: '0px solid #FFFFFF',\r\n\t\t\t\t\tglow: '20',\r\n\t\t\t\t\tglowColor: '#000000',\r\n\t\t\t\t\txBorder: \"0px solid #FFFFFF\",\r\n\t\t\t\t\txBgColor: '#FFFFFF',\r\n\t\t\t\t\txColor : '#000000',\r\n\t\t\t\t\tfadeIn: '300',\r\n\t\t\t\t\tfadeOut: '500',\r\n\t\t\t\t\tzindex: '2100',\r\n\t\t\t\t\trickRoll: 'false',\r\n\t\t\t\t\tunload: 'true',\r\n\t\t\t\t\tunloadAfter: '45',\r\n\t\t\t\t\tautohide: 2,\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t]\r\n\t});\r\n});\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Fetch and Display Your Vimeo Videos<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-766","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/pages\/766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/comments?post=766"}],"version-history":[{"count":1,"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/pages\/766\/revisions"}],"predecessor-version":[{"id":864,"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/pages\/766\/revisions\/864"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/media?parent=766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}