{"id":806,"date":"2025-02-11T16:18:48","date_gmt":"2025-02-11T10:48:48","guid":{"rendered":"https:\/\/awplife.com\/demo\/video-gallery-premium\/?page_id=806"},"modified":"2025-11-12T11:07:02","modified_gmt":"2025-11-12T11:07:02","slug":"youtube-playlist","status":"publish","type":"page","link":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/youtube-playlist\/","title":{"rendered":"Youtube Playlist ID"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Youtube :- <a href=\"https:\/\/www.youtube.com\/watch?v=44OBOSBd73M&amp;list=PLXR1UeeO9dcfi9nsaRUaUqAxms0Cem61y\">https:\/\/www.youtube.com\/watch?v=44OBOSBd73M&amp;list=<strong>PLXR1UeeO9dcfi9nsaRUaUqAxms0Cem61y<\/strong><\/a><\/p>\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_805 {\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_805 {\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<div id=\"your-page-column\" class=\"not-a-part-of-youram-plugin\">\r\n    <div id=\"yram\" class=\"youram-simple_805\"><\/div>\r\n<\/div>\r\n<style>\r\n    .youram-simple_805 {\r\n        text-align: center;\r\n    }\r\n\r\n    \r\n    \r\n    .playlist-item_805 {\r\n        width: 100%;\r\n        display: inline-block;\r\n        margin-bottom: 0;\r\n        background-color: #ffffff;\r\n        box-shadow: 1px 4px 11px rgb(0 0 0 \/ 20%) !important;\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\r\n    .video-grid_805 .yl-date-bucket {\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .video-item_805 {\r\n        margin-bottom: 2%;\r\n    }\r\n\r\n    .youram-simple_805 .yl-title {\r\n        color: #383838;\r\n        overflow: hidden;\r\n        margin-bottom: .60em;\r\n        font-size:18px;\r\n        font-weight: 400;\r\n        max-height: 3.1em;\r\n        line-height: 1.57em;\r\n        font-family: sans-serif\r\n    }\r\n\r\n    \r\n    .youram-simple_805 .playlist-text_805 {\r\n        width: 100%;\r\n        padding: 5% 5% !important;\r\n    }\r\n\r\n    .youram-simple_805 .yl-description {\r\n        overflow: hidden;\r\n        \/*color:#828282; *\/\r\n        color: #72777C;\r\n        height: auto;\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\r\n            .youram-simple_805 .yl-view-string {\r\n            display: none !important;\r\n        }\r\n\r\n            .youram-simple_805 .yl-date-bucket {\r\n            display: none !important;\r\n        }\r\n\r\n            .youram-simple_805 .yl-views-per-day {\r\n            display: none !important;\r\n        }\r\n\r\n        .youram-simple_805 .yl-load-more-button {\r\n        background-color:\r\n            #1e73be            !important;\r\n        color:\r\n            #ffffff            !important;\r\n    }\r\n\r\n    <\/style>\r\n\r\n\r\n\r\n<script>\r\n    jQuery(document).ready(function () {\r\n        var apiKey = \"AIzaSyBfgUs80QQn5O-JITj1NpWE4MZVNfXTK5Y\";\r\n        var sourceLink = \"PLXR1UeeO9dcfi9nsaRUaUqAxms0Cem61y\";\r\n        var maxResults = \"8\";\r\n        var postId = \"805\";\r\n        var nextPageToken = \"\";\r\n\r\n        function isPlaylistId(link) {\r\n            return \/^[A-Za-z0-9_-]{10,}$\/.test(link);\r\n        }\r\n\r\n        if (sourceLink.includes(',')) {\r\n            \/\/ Multiple playlists passed as comma-separated string\r\n            let playlists = sourceLink.split(',').map(id => id.trim());\r\n            playlists.forEach((pid, index) => {\r\n                loadVideosFromPlaylist(pid, false, index);\r\n            });\r\n        } else if (isPlaylistId(sourceLink)) {\r\n            loadVideosFromPlaylist(sourceLink, false, 0);\r\n        } else {\r\n            loadVideosFromChannel(sourceLink);\r\n        }\r\n\r\n\r\n\r\n        function loadVideosFromPlaylist(playlistId, loadMore, playlistIndex = 0, pageToken = '') {\r\n            jQuery.ajax({\r\n                url: \"https:\/\/www.googleapis.com\/youtube\/v3\/playlistItems\",\r\n                type: \"GET\",\r\n                data: {\r\n                    part: \"snippet\",\r\n                    playlistId: playlistId,\r\n                    maxResults: 50,\r\n                    pageToken: pageToken,\r\n                    key: apiKey\r\n                },\r\n                success: function (data) {\r\n                    var videoIds = data.items.map(item => item.snippet.resourceId.videoId).join(\",\");\r\n\r\n                    jQuery.ajax({\r\n                        url: \"https:\/\/www.googleapis.com\/youtube\/v3\/videos\",\r\n                        type: \"GET\",\r\n                        data: {\r\n                            part: \"snippet,statistics\",\r\n                            id: videoIds,\r\n                            key: apiKey\r\n                        },\r\n                        success: function (videoData) {\r\n                            let videosHtml = \"\";\r\n\r\n                            if (!loadMore && pageToken === '') {\r\n                                videosHtml += \"<div class='video-grid_\" + postId + \"_\" + playlistIndex + \"'>\";\r\n                            }\r\n\r\n                            jQuery.each(videoData.items, function (index, video) {\r\n                                var videoId = video.id;\r\n                                var title = video.snippet.title.split(\" \").slice(0, 10).join(\" \") + \"...\";\r\n                                var description = video.snippet.description;\r\n                                var thumbnail = video.snippet.thumbnails.medium.url;\r\n                                var views = video.statistics.viewCount ? video.statistics.viewCount.toLocaleString() : \"N\/A\";\r\n                                var timeAgo = formatTimeAgo(video.snippet.publishedAt);\r\n\r\n                                videosHtml += `\r\n                            <div class=\"video-item_${postId} col-md-3\">\r\n                                <div class=\"playlist-item_${postId}\">\r\n                                    <a href=\"https:\/\/www.youtube.com\/watch?v=${videoId}\" target=\"_blank\">\r\n                                        <img decoding=\"async\" src=\"${thumbnail}\" alt=\"${title}\">\r\n                                    <\/a>\r\n                                    <div class=\"playlist-text_${postId}\">\r\n                                        <div class=\"yl-title\">${title}<\/div>\r\n                                        <div class=\"yl-description\">${description}<\/div>\r\n                                        <div class=\"yl-separator-for-grid\"><\/div>\r\n                                        <div class=\"yl-view-string\">${views} <span>views<\/span><\/div>\r\n                                        <div class=\"yl-date-bucket\">${timeAgo}<\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        `;\r\n                            });\r\n\r\n                            if (!loadMore && pageToken === '') {\r\n                                videosHtml += \"<\/div>\";\r\n                            }\r\n\r\n                            jQuery(\".youram-simple_\" + postId).append(videosHtml);\r\n\r\n                            \/\/ \ud83d\udc47 If there's a next page, load it recursively\r\n                            if (data.nextPageToken) {\r\n                                loadVideosFromPlaylist(playlistId, true, playlistIndex, data.nextPageToken);\r\n                            }\r\n                        },\r\n                        error: function () {\r\n                            console.log(\"\u274c Failed to fetch video statistics.\");\r\n                        }\r\n                    });\r\n                },\r\n                error: function () {\r\n                    console.log(\"\u274c Failed to fetch playlist videos.\");\r\n                }\r\n            });\r\n        }\r\n\r\n\r\n        function loadVideosFromChannel(channelLink) {\r\n            jQuery(\".youram-simple_\" + postId).youramSimple({\r\n                apiKey: apiKey,\r\n                sourceLink: channelLink,\r\n                maxResults: maxResults,\r\n                videoDisplayMode: \"popup\",\r\n                loadMoreText: 'Load More Videos',\r\n                themeColor: \"rgb(255, 0, 0)\",\r\n            });\r\n        }\r\n\r\n        \/\/ \ud83c\udfaf \"Load More\" \u092c\u091f\u0928 \u092a\u0930 \u0915\u094d\u0932\u093f\u0915 \u0915\u0930\u0928\u0947 \u0915\u093e \u0907\u0935\u0947\u0902\u091f\r\n        jQuery(document).on(\"click\", \"#loadMoreBtn_\" + postId, function () {\r\n            loadVideosFromPlaylist(sourceLink, true);\r\n        });\r\n\r\n        function formatTimeAgo(dateString) {\r\n            let timeAgo = new Date(dateString);\r\n            let now = new Date();\r\n            let diff = Math.floor((now - timeAgo) \/ 1000);\r\n\r\n            if (diff < 60) return `${diff} seconds ago`;\r\n            if (diff < 3600) return `${Math.floor(diff \/ 60)} minutes ago`;\r\n            if (diff < 86400) return `${Math.floor(diff \/ 3600)} hours ago`;\r\n            if (diff < 2592000) return `${Math.floor(diff \/ 86400)} days ago`;\r\n            if (diff < 31536000) return `${Math.floor(diff \/ 2592000)} months ago`;\r\n            return `${Math.floor(diff \/ 31536000)} years ago`;\r\n        }\r\n\r\n        \/\/ Enable Magnific Popup\r\n        jQuery('.youram-simple_805').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<\/script><script>\r\n\tfunction VgLoadMore_805() {\r\n\t\tvar $grid = jQuery('.all-images').isotope({\r\n\t\t\t\/\/ options...\r\n\t\t\titemSelector: '.single-image',\r\n\t\t});\r\n\t\tjQuery(\".vg_load_more_805\").hide();\r\n\t\tjQuery(\".vg_loader_805\").show();\r\n\t\tvar vg_limit_start = parseInt(jQuery(\"#vg_limit_start_805\").val());\r\n\t\tvar vg_limit_end = parseInt(jQuery(\"#vg_limit_end_805\").val());\r\n\t\tvar vg_total_images = parseInt(jQuery(\"#vg_total_images_805\").val());\r\n\r\n\t\tif(vg_total_images > vg_limit_start){\r\n\t\t\tjQuery.ajax({\r\n\t\t\t\tdataType : 'html',\r\n\t\t\t\ttype: 'POST',\r\n\t\t\t\turl : location.href,\r\n\t\t\t\tcache: false,\r\n\t\t\t\tdata : '&vg_security=' + '2cb2515917' + '&vg_limit_start=' + vg_limit_start + '&vg_limit_end=' + vg_limit_end ,\r\n\t\t\t\tcomplete : function() {},\r\n\t\t\t\tsuccess: function(response) {\r\n\t\t\t\t\tvar actual_response = jQuery(response).find('div.vg_result_805');\r\n\t\t\t\t\tvar $items = jQuery(actual_response);\r\n\t\t\t\t\t$grid.append($items)\r\n\t\t\t\t\t.isotope('appended',$items);\r\n\t\t\t\t\t\/\/ layout Isotope after each image loads\r\n\t\t\t\t\t$grid.imagesLoaded().progress( function() {\r\n\t\t\t\t\t\t$grid.isotope('layout');\r\n\t\t\t\t\t});\r\n\t\t\t\t\t\r\n\t\t\t\t\tvideoLightning({\r\n\t\t\t\t\t\telements: [\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\".vid-805\": {\r\n\t\t\t\t\t\t\t\t\twidth: '700',\r\n\t\t\t\t\t\t\t\t\theight: '480',\r\n\t\t\t\t\t\t\t\t\tautoplay: true,\r\n\t\t\t\t\t\t\t\t\tautoclose: 'true',\r\n\t\t\t\t\t\t\t\t\tpopover: 'false',\r\n\t\t\t\t\t\t\t\t\tpeek: 'false',\r\n\t\t\t\t\t\t\t\t\tbdColor: '#000000',\r\n\t\t\t\t\t\t\t\t\tbdOpacity: '0.6',\r\n\t\t\t\t\t\t\t\t\tframeColor: '#000000',\r\n\t\t\t\t\t\t\t\t\tframeBorder: '0px solid #FFFFFF',\r\n\t\t\t\t\t\t\t\t\tglow: '20',\r\n\t\t\t\t\t\t\t\t\tglowColor: '#000000',\r\n\t\t\t\t\t\t\t\t\txBorder: \"0px solid #FFFFFF\",\r\n\t\t\t\t\t\t\t\t\txBgColor: '#FFFFFF',\r\n\t\t\t\t\t\t\t\t\txColor : '#000000',\r\n\t\t\t\t\t\t\t\t\tfadeIn: '300',\r\n\t\t\t\t\t\t\t\t\tfadeOut: '500',\r\n\t\t\t\t\t\t\t\t\tzindex: '2100',\r\n\t\t\t\t\t\t\t\t\trickRoll: 'false',\r\n\t\t\t\t\t\t\t\t\tunload: 'true',\r\n\t\t\t\t\t\t\t\t\tunloadAfter: '45',\r\n\t\t\t\t\t\t\t\t\tautohide: 2,\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t]\r\n\t\t\t\t\t});\t\r\n\t\t\t\t\t\r\n\t\t\t\t\tjQuery(\".vg_loader_805\").hide();\r\n\t\t\t\t\tjQuery(\".vg_load_more_805\").show();\r\n\t\t\t\t\t\r\n\t\t\t\t\tvar new_start_limit = vg_limit_end;\r\n\t\t\t\t\tvar new_end_limit = parseInt(vg_limit_end) +  parseInt(8);\r\n\t\t\t\t\tjQuery(\"#vg_limit_start_805\").val(new_start_limit);\r\n\t\t\t\t\tjQuery(\"#vg_limit_end_805\").val(new_end_limit);\r\n\t\t\t\t},\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\tjQuery(\".vg_loader_805\").hide();\r\n\t\t\tjQuery(\".vg_load_more_805\").hide();\r\n\t\t\tjQuery(\".vg_no_more_805\").show();\r\n\t\t}\r\n\t} \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-805\": {\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\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Youtube :- https:\/\/www.youtube.com\/watch?v=44OBOSBd73M&amp;list=PLXR1UeeO9dcfi9nsaRUaUqAxms0Cem61y<\/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-806","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/pages\/806","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=806"}],"version-history":[{"count":1,"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/pages\/806\/revisions"}],"predecessor-version":[{"id":863,"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/pages\/806\/revisions\/863"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/product-demo\/video-gallery-premium\/wp-json\/wp\/v2\/media?parent=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}