{"id":189,"date":"2025-07-02T10:46:37","date_gmt":"2025-07-02T10:46:37","guid":{"rendered":"https:\/\/bigarttagroup.com\/production\/?page_id=189"},"modified":"2025-07-02T10:56:37","modified_gmt":"2025-07-02T10:56:37","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/bigarttagroup.com\/production\/portfolio\/","title":{"rendered":"Portfolio"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.27.4″ _module_preset=”default” background_color=”#012635″ background_enable_image=”off” background_blend=”overlay” custom_margin=”-146px||||false|false” custom_padding=”200px||100px||false|false” locked=”off” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.27.4″ _module_preset=”default” custom_margin=”0px||0px||true|false” custom_padding=”0px||0px||true|false” custom_css_main_element=”display: flex;||align-items: center;” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.27.4″ _dynamic_attributes=”content” _module_preset=”default” text_font=”–et_global_body_font|300||on|||||” text_text_color=”#FFFFFF” header_text_color=”#FFFFFF” header_font_size=”62px” custom_margin=”||15px||false|false” custom_padding=”||0px||false|false” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoiY3VycmVudF9kYXRlIiwic2V0dGluZ3MiOnsiYmVmb3JlIjoiU0hPT1RJTkcgRnJvbSAyMDE1IC0gIiwiYWZ0ZXIiOiIiLCJkYXRlX2Zvcm1hdCI6ImN1c3RvbSIsImN1c3RvbV9kYXRlX2Zvcm1hdCI6IjIweSJ9fQ==@[\/et_pb_text][et_pb_text _builder_version=”4.27.4″ _module_preset=”default” text_text_color=”#FFFFFF” header_text_color=”#FFFFFF” header_font_size=”62px” global_colors_info=”{}”]<\/p>\n

Our Portfolio<\/strong><\/h1>\n

[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_code _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″] Stacked Tags Animation<\/title><!-- [et_pb_line_break_holder] --> <\/p>\n<style><!-- [et_pb_line_break_holder] --> .tag-stack {<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> width: 300px;<!-- [et_pb_line_break_holder] --> height: 180px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .tag {<!-- [et_pb_line_break_holder] --> display: inline-flex;<!-- [et_pb_line_break_holder] --> align-items: center;<!-- [et_pb_line_break_holder] --> gap: 8px;<!-- [et_pb_line_break_holder] --> padding: 10px 40px;<!-- [et_pb_line_break_holder] --> border-radius: 8px;<!-- [et_pb_line_break_holder] --> font-weight: bold;<!-- [et_pb_line_break_holder] --> color: #333;<!-- [et_pb_line_break_holder] --> box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> left: 0;<!-- [et_pb_line_break_holder] --> white-space: nowrap;<!-- [et_pb_line_break_holder] --> animation: stackCycle 6s ease-in-out infinite;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .tag1 { background-color: #d4edda; color: #2e7d32; animation-delay: 0s; }<!-- [et_pb_line_break_holder] --> .tag2 { background-color: #dbeafe; color: #2563eb; animation-delay: 0.1s; }<!-- [et_pb_line_break_holder] --> .tag3 { background-color: #ccfbf1; color: #0f766e; animation-delay: 0.2s; }<!-- [et_pb_line_break_holder] --> .tag4 { background-color: #fef3c7; color: #b45309; animation-delay: 0.3s; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .tag svg {<!-- [et_pb_line_break_holder] --> width: 18px;<!-- [et_pb_line_break_holder] --> height: 18px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> @keyframes stackCycle {<!-- [et_pb_line_break_holder] --> 0%, 100% {<!-- [et_pb_line_break_holder] --> top: var(--top);<!-- [et_pb_line_break_holder] --> transform: var(--rotate);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> 25%, 75% {<!-- [et_pb_line_break_holder] --> top: calc(var(--index) * 35px);<!-- [et_pb_line_break_holder] --> transform: rotate(0deg);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .tag1 { --top: 15px; --rotate: rotate(-3deg); --index: 0; z-index: 4; }<!-- [et_pb_line_break_holder] --> .tag2 { --top: 175px; --rotate: rotate(2deg); --index: 1; z-index: 3; }<!-- [et_pb_line_break_holder] --> .tag3 { --top: 75px; --rotate: rotate(-2deg); --index: 2; z-index: 2; }<!-- [et_pb_line_break_holder] --> .tag4 { --top: 50px; --rotate: rotate(3deg); --index: 3; z-index: 1; }<!-- [et_pb_line_break_holder] --> <\/style>\n<p><!-- [et_pb_line_break_holder] --><\/head><!-- [et_pb_line_break_holder] --><body><!-- [et_pb_line_break_holder] --> <\/p>\n<div class=\"tag-stack\"><!-- [et_pb_line_break_holder] --> <\/p>\n<div class=\"tag tag4\"><!-- [et_pb_line_break_holder] --> <!-- Pencil Icon --><!-- [et_pb_line_break_holder] --> <svg fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"m14.06 9.02-1.06-1.06 6.49-6.49 1.06 1.06-6.49 6.49Zm1.88 1.88-1.06-1.06L5 19.71V21h1.29l9.65-9.65Z\"\/><\/svg><!-- [et_pb_line_break_holder] --> Documentaries<!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --> <\/p>\n<div class=\"tag tag3\"><!-- [et_pb_line_break_holder] --> <!-- Interface Icon --><!-- [et_pb_line_break_holder] --> <svg fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M2 3h20v2H2V3Zm0 14h20v2H2v-2Zm0-7h20v2H2v-2Z\"\/><\/svg><!-- [et_pb_line_break_holder] --> Social Media Videos<!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --> <\/p>\n<div class=\"tag tag2\"><!-- [et_pb_line_break_holder] --> <!-- Sparkle Icon --><!-- [et_pb_line_break_holder] --> <svg fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M9 19H7l-1 3-1-3H3l2-2-1-3 2 1 2-1-1 3 2 2zm4-14-1-3-1 3H9l2 2-1 3 2-1 2 1-1-3 2-2h-2zm6 9-1-3-1 3h-2l2 2-1 3 2-1 2 1-1-3 2-2h-2z\"\/><\/svg><!-- [et_pb_line_break_holder] --> Event Coverage<!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --> <\/p>\n<div class=\"tag tag1\"><!-- [et_pb_line_break_holder] --> <!-- Globe Icon --><!-- [et_pb_line_break_holder] --> <svg fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.49 2 2 6.48 2 12s4.49 10 10 10 10-4.48 10-10S17.51 2 12 2Zm6.93 8h-3.05a15.88 15.88 0 0 0-1.27-5.21A8.09 8.09 0 0 1 18.93 10ZM12 4c.9 1.25 1.5 3.05 1.71 5H10.3C10.5 7.05 11.1 5.25 12 4Zm-2.61.79A15.88 15.88 0 0 0 8.12 10H5.07a8.09 8.09 0 0 1 4.32-5.21ZM4 12c0-.68.08-1.34.21-2h3.26c-.08.65-.13 1.31-.13 2s.05 1.35.13 2H4.21A7.99 7.99 0 0 1 4 12Zm1.07 4h3.05a15.88 15.88 0 0 0 1.27 5.21A8.09 8.09 0 0 1 5.07 16ZM12 20c-.9-1.25-1.5-3.05-1.71-5h3.41C13.5 16.95 12.9 18.75 12 20Zm2.61-.79A15.88 15.88 0 0 0 15.88 14h3.05a8.09 8.09 0 0 1-4.32 5.21ZM15.52 12c0 .69-.05 1.35-.13 2h-6.78c-.08-.65-.13-1.31-.13-2s.05-1.35.13-2h6.78c.08.65.13 1.31.13 2Zm1.36-2h3.05a8.09 8.09 0 0 0-4.32-5.21A15.88 15.88 0 0 1 16.88 10Z\"\/><\/svg><!-- [et_pb_line_break_holder] --> Explainer Videos<!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --> <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/body><!-- [et_pb_line_break_holder] --><\/html><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.27.4″ _module_preset=”default” locked=”off” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.4″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″][et_pb_column type=”4_4″ _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.27.4″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n<div class=\"youtube-playlists\"><div class=\"playlist-filter\"><button class=\"playlist-button active\" data-playlist-id=\"all\">All<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEGtjSjoma28J7okFFsy8i4Z\">Video Company Profiles<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEE2drekae7ovYP15aZuru9x\">Documentaries<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEG9WsUpzq8ymIfZ-Dtb2TLp\">Web Hosting<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEH-Law8D5QTFwbcobOWi-1U\">Promo Videos<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEEQ7xy3FyVZS2VN3jMOBQYm\">Event Coverage<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEGL1ArxBDJw80v2BAl8ZtCM\">2D Animations<\/button><select class=\"playlist-select\" style=\"display:none;\" id=\"playlist-select\"><option value=\"all\" selected>All<\/option><option value=\"PLrgjRWEREmEGtjSjoma28J7okFFsy8i4Z\">Video Company Profiles<\/option><option value=\"PLrgjRWEREmEE2drekae7ovYP15aZuru9x\">Documentaries<\/option><option value=\"PLrgjRWEREmEG9WsUpzq8ymIfZ-Dtb2TLp\">Web Hosting<\/option><option value=\"PLrgjRWEREmEH-Law8D5QTFwbcobOWi-1U\">Promo Videos<\/option><option value=\"PLrgjRWEREmEEQ7xy3FyVZS2VN3jMOBQYm\">Event Coverage<\/option><option value=\"PLrgjRWEREmEGL1ArxBDJw80v2BAl8ZtCM\">2D Animations<\/option><\/select><\/div><div class=\"youtube-videos\"><\/div><\/div><style>\n .youtube-playlists {\n margin: 20px auto;\n width: 100%;\n }\n\n .playlist-filter {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .playlist-button {\n padding: 10px 15px;\n cursor: pointer;\n background-color: white; \/* Set the background to white *\/\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n .playlist-button.active {\n background-color: #DC8032; \/* Active color set to warm orange *\/\n color: #fff; \/* White text when active *\/\n }\n\n .youtube-videos {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n justify-content: center; \/* Center align the video thumbnails *\/\n }\n\n .youtube-video {\n width: 355px; \/* Set the width of the card to 355px *\/\n height: 205px; \/* Set the height of the card to 205px *\/\n text-align: center;\n position: relative;\n overflow: hidden;\n margin-bottom: 20px; \/* Ensure space between the rows *\/\n border-radius: 10px; \/* Optional: gives the card a rounded corner effect *\/\n }\n\n .youtube-video img {\n width: 100%; \/* Make the image fit the card size *\/\n height: 100%; \/* Make the image fill the height *\/\n object-fit: cover; \/* Ensure the image fills the card without stretching *\/\n border-radius: 10px; \/* Rounded corners for images *\/\n transition: transform 0.3s ease;\n }\n\n .youtube-video .overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .youtube-video:hover .overlay {\n opacity: 1; \/* Show overlay on hover *\/\n }\n\n .youtube-video .overlay .play-icon {\n font-size: 40px;\n color: white;\n margin-bottom: 10px; \/* Space between icon and title *\/\n cursor: pointer;\n }\n\n .youtube-video .overlay .title {\n font-size: 16px;\n color: white;\n text-align: center;\n margin-top: 0; \/* Ensure no additional space on top *\/\n }\n\n .youtube-video:hover img {\n transform: scale(1.1); \/* Zoom image slightly on hover *\/\n }\n\n \/* Fancybox custom styles for larger lightbox *\/\n .fancybox-content {\n width: 80% !important;\n max-width: 800px !important;\n max-height: 500px !important;\n min-width: 800px !important;\n min-height: 500px !important;\n margin: auto !important;\n }\n\n \/* Close button style *\/\n .fancybox-close {\n top: 10px;\n right: 10px;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n font-size: 20px;\n width: 30px;\n height: 30px;\n text-align: center;\n line-height: 30px;\n border-radius: 50%;\n cursor: pointer;\n }\n\n \/* Add overlay to darken the background *\/\n .fancybox-overlay {\n background: rgba(0, 0, 0, 0.7) !important;\n }\n\n \/* Responsive styles *\/\n @media (max-width: 768px) {\n .playlist-filter {\n display: block;\n }\n\n .playlist-button {\n display: none;\n }\n\n .playlist-select {\n display: block;\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 5px;\n background-color: #f1f1f1;\n }\n\n .youtube-video {\n flex: 1 1 calc(50% - 20px); \/* Make videos take up 50% width on smaller screens *\/\n }\n }\n\n @media (max-width: 480px) {\n .youtube-video {\n flex: 1 1 100%; \/* Make videos take up full width on very small screens *\/\n }\n }\n <\/style><link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/><script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"><\/script><script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const apiKey = \"AIzaSyA8vUZvTU_TPUhoIEHMhu-0ZS1v-R0P-fQ\";\n const channelId = \"UCvBbOEGuy3GZWqK5_ndfYYw\";\n const initialPlaylistId = \"all\";\n const videosContainer = document.querySelector(\".youtube-videos\");\n const buttons = document.querySelectorAll(\".playlist-button\") || [];\n const select = document.getElementById(\"playlist-select\");\n\n function fetchVideos(playlistId) {\n let url =\n playlistId === \"all\"\n ? `https:\/\/www.googleapis.com\/youtube\/v3\/search?part=snippet&channelId=${channelId}&maxResults=10&order=date&type=video&key=${apiKey}`\n : `https:\/\/www.googleapis.com\/youtube\/v3\/playlistItems?part=snippet&playlistId=${playlistId}&maxResults=10&key=${apiKey}`;\n\n fetch(url)\n .then((response) => response.json())\n .then((data) => {\n videosContainer.innerHTML = \"\";\n const items = data.items || [];\n items.forEach((item) => {\n const videoId =\n playlistId === \"all\"\n ? item.id.videoId\n : item.snippet.resourceId.videoId;\n\n const videoHTML = `\n <div class=\"youtube-video\">\n <a href=\"https:\/\/www.youtube.com\/embed\/${videoId}\" data-fancybox=\"gallery\" data-type=\"iframe\">\n <img decoding=\"async\" src=\"${item.snippet.thumbnails.medium.url}\" alt=\"${item.snippet.title}\">\n <div class=\"overlay\">\n <i class=\"play-icon fas fa-play\"><\/i>\n <p class=\"title\">${item.snippet.title}<\/p>\n <\/div>\n <\/a>\n <\/div>\n `;\n videosContainer.innerHTML += videoHTML;\n });\n });\n }\n\n if (buttons.length > 0) {\n buttons.forEach((button) => {\n button.addEventListener(\"click\", function () {\n buttons.forEach((btn) => btn.classList.remove(\"active\"));\n this.classList.add(\"active\");\n const id = this.getAttribute(\"data-playlist-id\");\n if (select) select.value = id;\n fetchVideos(id);\n });\n });\n }\n\n if (select) {\n select.addEventListener(\"change\", function () {\n if (buttons.length > 0) buttons.forEach((btn) => btn.classList.remove(\"active\"));\n fetchVideos(this.value);\n });\n }\n\n fetchVideos(initialPlaylistId);\n });\n <\/script>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our Portfolio<div class=\"youtube-playlists\"><div class=\"playlist-filter\"><button class=\"playlist-button active\" data-playlist-id=\"all\">All<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEGtjSjoma28J7okFFsy8i4Z\">Video Company Profiles<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEE2drekae7ovYP15aZuru9x\">Documentaries<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEG9WsUpzq8ymIfZ-Dtb2TLp\">Web Hosting<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEH-Law8D5QTFwbcobOWi-1U\">Promo Videos<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEEQ7xy3FyVZS2VN3jMOBQYm\">Event Coverage<\/button><button class=\"playlist-button\" data-playlist-id=\"PLrgjRWEREmEGL1ArxBDJw80v2BAl8ZtCM\">2D Animations<\/button><select class=\"playlist-select\" style=\"display:none;\" id=\"playlist-select\"><option value=\"all\" selected>All<\/option><option value=\"PLrgjRWEREmEGtjSjoma28J7okFFsy8i4Z\">Video Company Profiles<\/option><option value=\"PLrgjRWEREmEE2drekae7ovYP15aZuru9x\">Documentaries<\/option><option value=\"PLrgjRWEREmEG9WsUpzq8ymIfZ-Dtb2TLp\">Web Hosting<\/option><option value=\"PLrgjRWEREmEH-Law8D5QTFwbcobOWi-1U\">Promo Videos<\/option><option value=\"PLrgjRWEREmEEQ7xy3FyVZS2VN3jMOBQYm\">Event Coverage<\/option><option value=\"PLrgjRWEREmEGL1ArxBDJw80v2BAl8ZtCM\">2D Animations<\/option><\/select><\/div><div class=\"youtube-videos\"><\/div><\/div><style>\n .youtube-playlists {\n margin: 20px auto;\n width: 100%;\n }\n\n .playlist-filter {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n }\n\n .playlist-button {\n padding: 10px 15px;\n cursor: pointer;\n background-color: white; \/* Set the background to white *\/\n border: 1px solid #ddd;\n border-radius: 5px;\n }\n\n .playlist-button.active {\n background-color: #DC8032; \/* Active color set to warm orange *\/\n color: #fff; \/* White text when active *\/\n }\n\n .youtube-videos {\n display: flex;\n flex-wrap: wrap;\n gap: 20px;\n justify-content: center; \/* Center align the video thumbnails *\/\n }\n\n .youtube-video {\n width: 355px; \/* Set the width of the card to 355px *\/\n height: 205px; \/* Set the height of the card to 205px *\/\n text-align: center;\n position: relative;\n overflow: hidden;\n margin-bottom: 20px; \/* Ensure space between the rows *\/\n border-radius: 10px; \/* Optional: gives the card a rounded corner effect *\/\n }\n\n .youtube-video img {\n width: 100%; \/* Make the image fit the card size *\/\n height: 100%; \/* Make the image fill the height *\/\n object-fit: cover; \/* Ensure the image fills the card without stretching *\/\n border-radius: 10px; \/* Rounded corners for images *\/\n transition: transform 0.3s ease;\n }\n\n .youtube-video .overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .youtube-video:hover .overlay {\n opacity: 1; \/* Show overlay on hover *\/\n }\n\n .youtube-video .overlay .play-icon {\n font-size: 40px;\n color: white;\n margin-bottom: 10px; \/* Space between icon and title *\/\n cursor: pointer;\n }\n\n .youtube-video .overlay .title {\n font-size: 16px;\n color: white;\n text-align: center;\n margin-top: 0; \/* Ensure no additional space on top *\/\n }\n\n .youtube-video:hover img {\n transform: scale(1.1); \/* Zoom image slightly on hover *\/\n }\n\n \/* Fancybox custom styles for larger lightbox *\/\n .fancybox-content {\n width: 80% !important;\n max-width: 800px !important;\n max-height: 500px !important;\n min-width: 800px !important;\n min-height: 500px !important;\n margin: auto !important;\n }\n\n \/* Close button style *\/\n .fancybox-close {\n top: 10px;\n right: 10px;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n font-size: 20px;\n width: 30px;\n height: 30px;\n text-align: center;\n line-height: 30px;\n border-radius: 50%;\n cursor: pointer;\n }\n\n \/* Add overlay to darken the background *\/\n .fancybox-overlay {\n background: rgba(0, 0, 0, 0.7) !important;\n }\n\n \/* Responsive styles *\/\n @media (max-width: 768px) {\n .playlist-filter {\n display: block;\n }\n\n .playlist-button {\n display: none;\n }\n\n .playlist-select {\n display: block;\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 5px;\n background-color: #f1f1f1;\n }\n\n .youtube-video {\n flex: 1 1 calc(50% - 20px); \/* Make videos take up 50% width on smaller screens *\/\n }\n }\n\n @media (max-width: 480px) {\n .youtube-video {\n flex: 1 1 100%; \/* Make videos take up full width on very small screens *\/\n }\n }\n <\/style><link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.css\" \/><script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@fancyapps\/fancybox@3.5.7\/dist\/jquery.fancybox.min.js\"><\/script><script>\n document.addEventListener(\"DOMContentLoaded\", function () {\n const apiKey = \"AIzaSyA8vUZvTU_TPUhoIEHMhu-0ZS1v-R0P-fQ\";\n const channelId = \"UCvBbOEGuy3GZWqK5_ndfYYw\";\n const initialPlaylistId = \"all\";\n const videosContainer = document.querySelector(\".youtube-videos\");\n const buttons = document.querySelectorAll(\".playlist-button\") || [];\n const select = document.getElementById(\"playlist-select\");\n\n function fetchVideos(playlistId) {\n let url =\n playlistId === \"all\"\n ? `https:\/\/www.googleapis.com\/youtube\/v3\/search?part=snippet&channelId=${channelId}&maxResults=10&order=date&type=video&key=${apiKey}`\n : `https:\/\/www.googleapis.com\/youtube\/v3\/playlistItems?part=snippet&playlistId=${playlistId}&maxResults=10&key=${apiKey}`;\n\n fetch(url)\n .then((response) => response.json())\n .then((data) => {\n videosContainer.innerHTML = \"\";\n const items = data.items || [];\n items.forEach((item) => {\n const videoId =\n playlistId === \"all\"\n ? item.id.videoId\n : item.snippet.resourceId.videoId;\n\n const videoHTML = `\n <div class=\"youtube-video\">\n <a href=\"https:\/\/www.youtube.com\/embed\/${videoId}\" data-fancybox=\"gallery\" data-type=\"iframe\">\n <img decoding=\"async\" src=\"${item.snippet.thumbnails.medium.url}\" alt=\"${item.snippet.title}\">\n <div class=\"overlay\">\n <i class=\"play-icon fas fa-play\"><\/i>\n <p class=\"title\">${item.snippet.title}<\/p>\n <\/div>\n <\/a>\n <\/div>\n `;\n videosContainer.innerHTML += videoHTML;\n });\n });\n }\n\n if (buttons.length > 0) {\n buttons.forEach((button) => {\n button.addEventListener(\"click\", function () {\n buttons.forEach((btn) => btn.classList.remove(\"active\"));\n this.classList.add(\"active\");\n const id = this.getAttribute(\"data-playlist-id\");\n if (select) select.value = id;\n fetchVideos(id);\n });\n });\n }\n\n if (select) {\n select.addEventListener(\"change\", function () {\n if (buttons.length > 0) buttons.forEach((btn) => btn.classList.remove(\"active\"));\n fetchVideos(this.value);\n });\n }\n\n fetchVideos(initialPlaylistId);\n });\n <\/script><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":3,"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/pages\/189\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/bigarttagroup.com\/production\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}