{"id":22658,"date":"2026-05-22T15:11:53","date_gmt":"2026-05-22T15:11:53","guid":{"rendered":"https:\/\/www.lekkizone.com.ng\/newsite\/?page_id=22658"},"modified":"2026-07-22T13:47:49","modified_gmt":"2026-07-22T13:47:49","slug":"videos","status":"publish","type":"page","link":"https:\/\/www.lekkizone.com.ng\/newsite\/videos\/","title":{"rendered":"videos"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22658\" class=\"elementor elementor-22658\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-274862d e-flex e-con-boxed e-con e-parent\" data-id=\"274862d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca1b920 elementor-widget elementor-widget-heading\" data-id=\"ca1b920\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Video Gallery<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6fd7c3f elementor-widget elementor-widget-text-editor\" data-id=\"6fd7c3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Explore our collection of beautifully crafted spaces, premium tile designs, and inspiring installations that showcase quality, style, and elegance.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e7c5339 e-con-full e-flex e-con e-parent\" data-id=\"e7c5339\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-311c4fd e-con-full e-flex e-con e-child\" data-id=\"311c4fd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f301fce e-con-full e-flex e-con e-child\" data-id=\"f301fce\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3256b91 elementor-widget elementor-widget-shortcode\" data-id=\"3256b91\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <style>\r\n        .lz-video-display-grid { width: 100%; max-width: 1800px; margin: 0 auto; display: flex; flex-direction: column; gap: 50px; font-family: system-ui, sans-serif; padding: 20px; box-sizing: border-box; position: relative; }\r\n        .lz-control-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 20px; gap: 15px; }\r\n        .lz-search-form { position: relative; flex: 0 0 320px; margin: 0; }\r\n        .lz-search-input { width: 100%; padding: 12px 40px 12px 20px !important; border-radius: 30px !important; border: 0 !important; background: rgba(255,255,255,0.85) !important; color: #333 !important; font-size: 15px !important; outline: none; }\r\n        .lz-search-form svg { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: #555; }\r\n        .lz-dropdown-group { display: flex; gap: 15px; }\r\n        .lz-select-custom { background: #ffffff !important; border: 0 !important; color: #333 !important; padding: 10px 35px 10px 15px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23333' d='M0 0h10L5 6z'\/><\/svg>\") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; }\r\n        \r\n        .lz-ajax-response-container { width: 100%; min-height: 200px; position: relative; transition: opacity 0.2s ease; }\r\n        .lz-ajax-loading { opacity: 0.4; pointer-events: none; }\r\n        \r\n        .lz-video-rows-wrapper { display: flex; flex-direction: column; gap: 60px; width: 100%; }\r\n        .lz-video-row { display: flex; flex-direction: row; gap: 5%; align-items: center; width: 100%; }\r\n        .lz-video-left-col { flex: 0 0 45%; width: 45%; position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 16 \/ 9; background: #194669; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }\r\n        .lz-video-placeholder-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }\r\n        .lz-video-placeholder-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n        .lz-custom-play-btn { position: absolute; width: 65px; height: 48px; background: rgba(255, 255, 255, 0.15); border: 2.5px solid #ffffff; border-radius: 8px; display: flex; align-items: center; justify-content: center; z-index: 5; }\r\n        .lz-custom-play-btn::after { content: \"\"; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #ffffff; margin-left: 3px; }\r\n        .lz-responsive-video-embed { width: 100%; height: 100%; }\r\n        .lz-responsive-video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }\r\n        .lz-content-right-col { flex: 0 0 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; text-align: left; }\r\n        .lz-video-title { font-size: 34px !important; font-weight: 600 !important; margin: 0 0 12px 0 !important; color: #ffffff !important; line-height: 1.25 !important; }\r\n        .lz-video-date { font-size: 16px !important; color: #d1e3f0 !important; margin: 0 0 20px 0 !important; }\r\n        .lz-video-desc-content, .lz-video-desc-content p { font-size: 14.5px !important; line-height: 1.65 !important; color: #e2f0fb !important; margin: 0 0 12px 0 !important; }\r\n        \r\n        \/* =========================================================================\r\n           5. ADOPTED CUSTOM SLIDER DOT INDICATOR \/ PILL TRACK STYLES\r\n           ========================================================================= *\/\r\n        .ayg-carousel-pagination-wrapper {\r\n            display: flex !important;\r\n            justify-content: center !important;\r\n            align-items: center !important;\r\n            margin: 40px auto 0 auto !important;\r\n            width: 100% !important;\r\n            clear: both !important;\r\n            float: none !important;\r\n        }\r\n\r\n        .ayg-carousel-pill {\r\n            display: inline-flex !important;\r\n            flex-direction: row !important;\r\n            background: rgba(255, 255, 255, 0.85) !important;\r\n            backdrop-filter: blur(4px) !important;\r\n            -webkit-backdrop-filter: blur(4px) !important;\r\n            border-radius: 50px !important;\r\n            padding: 6px 12px !important;\r\n            align-items: center !important;\r\n            justify-content: center !important;\r\n            gap: 12px !important;\r\n            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;\r\n            border: 1px solid rgba(226, 232, 240, 0.8) !important;\r\n            margin: 0 auto !important;\r\n            width: auto !important;\r\n            min-width: 160px !important;\r\n            box-sizing: border-box !important;\r\n        }\r\n\r\n        \/* Combined dynamic mapping for links (a) and structural states (span) inside WP core array *\/\r\n        .ayg-carousel-pill a, \r\n        .ayg-carousel-pill span.page-numbers {\r\n            width: 32px !important;\r\n            height: 32px !important;\r\n            min-width: 32px !important;\r\n            background: #f1f5f9 !important;\r\n            color: #475569 !important;\r\n            font-size: 0.85rem !important;\r\n            font-weight: 700 !important;\r\n            display: flex !important;\r\n            align-items: center !important;\r\n            justify-content: center !important;\r\n            border-radius: 50% !important;\r\n            cursor: pointer !important;\r\n            transition: all 0.25s ease !important;\r\n            user-select: none !important;\r\n            margin: 0 !important;\r\n            padding: 0 !important;\r\n            line-height: 1 !important;\r\n            text-decoration: none !important;\r\n        }\r\n\r\n        \/* Mapping .active attributes cleanly back onto core active selection *\/\r\n        .ayg-carousel-pill .page-numbers.current {\r\n            background: #1a3a6c !important;\r\n            color: #ffffff !important;\r\n            box-shadow: 0 3px 8px rgba(26, 58, 108, 0.3) !important;\r\n            cursor: default !important;\r\n        }\r\n\r\n        \/* Enforcing directional arrow structural styles *\/\r\n        .ayg-carousel-pill a.prev, \r\n        .ayg-carousel-pill a.next {\r\n            background: #1a3a6c !important;\r\n            color: #ffffff !important;\r\n            border: none !important;\r\n            width: 36px !important;\r\n            height: 36px !important;\r\n            min-width: 36px !important;\r\n            border-radius: 50% !important;\r\n            cursor: pointer !important;\r\n            display: flex !important;\r\n            align-items: center !important;\r\n            justify-content: center !important;\r\n            font-size: 16px !important;\r\n            font-weight: bold !important;\r\n            line-height: 1 !important;\r\n            padding: 0 !important;\r\n            margin: 0 !important;\r\n            transition: background 0.2s, transform 0.15s !important;\r\n        }\r\n\r\n        .ayg-carousel-pill a.prev:hover, \r\n        .ayg-carousel-pill a.next:hover {\r\n            background: #011a4f !important;\r\n            transform: scale(1.05) !important;\r\n            color: #ffffff !important;\r\n        }\r\n        \r\n        .ayg-carousel-pill a:not(.prev):not(.next):hover {\r\n            background: #e2e8f0 !important;\r\n            color: #1a3a6c !important;\r\n        }\r\n\r\n        @media (max-width: 900px) {\r\n            .lz-control-bar { flex-direction: column; align-items: flex-start; }\r\n            .lz-search-form { flex: 0 0 100%; width: 100%; }\r\n            .lz-video-row { flex-direction: column; gap: 25px; }\r\n            .lz-video-left-col, .lz-content-right-col { width: 100%; flex: 0 0 100%; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"lz-video-display-grid\">\r\n        <div class=\"lz-control-bar\">\r\n            <div class=\"lz-search-form\">\r\n                <input type=\"text\" id=\"lz-search-field\" class=\"lz-search-input\" placeholder=\"Search\">\r\n            <\/div>\r\n\r\n            <div class=\"lz-dropdown-group\">\r\n                <select id=\"lz-filter-field\" class=\"lz-select-custom\">\r\n                    <option value=\"all\">Filter: All<\/option>\r\n                    <option value=\"date\">Filter: By Date<\/option>\r\n                    <option value=\"alphabetical\">Filter: Alphabetical<\/option>\r\n                <\/select>\r\n\r\n                <select id=\"lz-sort-field\" class=\"lz-select-custom\">\r\n                    <option value=\"desc\">Sort: Newest<\/option>\r\n                    <option value=\"asc\">Sort: Oldest<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div id=\"lz-video-ajax-target\" class=\"lz-ajax-response-container\"><\/div>\r\n    <\/div>\r\n\r\n    <script type=\"text\/javascript\">\r\n        jQuery(document).ready(function($) {\r\n            let searchTimer;\r\n\r\n            function adjustSortDropdownUI(selectedFilter) {\r\n                let sortDropdown = $('#lz-sort-field');\r\n                let currentVal = sortDropdown.val();\r\n\r\n                if (selectedFilter === 'alphabetical') {\r\n                    sortDropdown.html(`\r\n                        <option value=\"asc\">Sort: A - Z<\/option>\r\n                        <option value=\"desc\">Sort: Z - A<\/option>\r\n                    `);\r\n                } else {\r\n                    sortDropdown.html(`\r\n                        <option value=\"desc\">Sort: Newest<\/option>\r\n                        <option value=\"asc\">Sort: Oldest<\/option>\r\n                    `);\r\n                }\r\n                sortDropdown.val(currentVal);\r\n            }\r\n\r\n            function triggerVideoAjaxLoad(pageNumber = 1) {\r\n                $('#lz-video-ajax-target').addClass('lz-ajax-loading');\r\n                \r\n                let data = {\r\n                    action: 'lz_fetch_videos',\r\n                    paged: pageNumber,\r\n                    search: $('#lz-search-field').val(),\r\n                    sort: $('#lz-sort-field').val(),\r\n                    filter: $('#lz-filter-field').val()\r\n                };\r\n\r\n                $.post('https:\/\/www.lekkizone.com.ng\/newsite\/wp-admin\/admin-ajax.php', data, function(response) {\r\n                    $('#lz-video-ajax-target').html(response).removeClass('lz-ajax-loading');\r\n                });\r\n            }\r\n\r\n            $('#lz-filter-field').on('change', function() {\r\n                adjustSortDropdownUI($(this).val());\r\n                triggerVideoAjaxLoad(1);\r\n            });\r\n\r\n            $('#lz-sort-field').on('change', function() {\r\n                triggerVideoAjaxLoad(1);\r\n            });\r\n\r\n            $('#lz-search-field').on('keyup input', function() {\r\n                clearTimeout(searchTimer);\r\n                searchTimer = setTimeout(function() {\r\n                    triggerVideoAjaxLoad(1);\r\n                }, 400); \r\n            });\r\n\r\n            $(document).on('click', '.ayg-carousel-pill a', function(e) {\r\n                e.preventDefault();\r\n                let targetPage = 1;\r\n                let text = $(this).text().trim();\r\n\r\n                if (text === '\u2039') {\r\n                    let current = parseInt($('.ayg-carousel-pill .current').text());\r\n                    targetPage = current - 1;\r\n                } else if (text === '\u203a') {\r\n                    let current = parseInt($('.ayg-carousel-pill .current').text());\r\n                    targetPage = current + 1;\r\n                } else {\r\n                    targetPage = parseInt(text);\r\n                }\r\n\r\n                if(targetPage > 0) {\r\n                    triggerVideoAjaxLoad(targetPage);\r\n                    $('html, body').animate({\r\n                        scrollTop: $(\".lz-video-display-grid\").offset().top - 100\r\n                    }, 300);\r\n                }\r\n            });\r\n\r\n            adjustSortDropdownUI($('#lz-filter-field').val());\r\n            triggerVideoAjaxLoad(1);\r\n        });\r\n    <\/script>\r\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Video Gallery Explore our collection of beautifully crafted spaces, premium tile designs, and inspiring installations that showcase quality, style, and elegance.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-22658","page","type-page","status-publish","hentry"],"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/pages\/22658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/comments?post=22658"}],"version-history":[{"count":55,"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/pages\/22658\/revisions"}],"predecessor-version":[{"id":23896,"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/pages\/22658\/revisions\/23896"}],"wp:attachment":[{"href":"https:\/\/www.lekkizone.com.ng\/newsite\/wp-json\/wp\/v2\/media?parent=22658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}