{"id":22278,"date":"2025-10-18T23:26:01","date_gmt":"2025-10-18T23:26:01","guid":{"rendered":"https:\/\/osoulk.com\/?page_id=22278"},"modified":"2025-10-18T23:26:22","modified_gmt":"2025-10-18T23:26:22","slug":"reels","status":"publish","type":"page","link":"https:\/\/osoulk.com\/ar\/reels\/","title":{"rendered":"\u0645\u0642\u0627\u0637\u0639"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"22278\" class=\"elementor elementor-22278\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-86305cc e-flex e-con-boxed e-con e-parent\" data-id=\"86305cc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da6f155 elementor-widget elementor-widget-shortcode\" data-id=\"da6f155\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"tiktok-style-container\">\n            <style>\n                .tiktok-style-container {\n                    position: fixed;\n                    top: 0;\n                    left: 0;\n                    width: 100vw;\n                    height: 100vh;\n                    overflow-y: auto;\n                    overflow-x: hidden;\n                    background: #000;\n                    scroll-behavior: smooth;\n                    scroll-snap-type: y mandatory;\n                    -webkit-overflow-scrolling: touch;\n                    z-index: 9999;\n                }\n\n                .tiktok-video-item {\n                    position: relative;\n                    width: 100%;\n                    height: 100vh;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    background: #000;\n                    scroll-snap-align: start;\n                    flex-shrink: 0;\n                }\n\n                .tiktok-video-item.active {\n                    display: flex;\n                }\n\n                .tiktok-video-wrapper {\n                    position: relative;\n                    width: 100%;\n                    height: 100vh;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                .tiktok-video-content {\n                    position: relative;\n                    width: 100%;\n                    height: 100vh;\n                    background: #000;\n                    display: flex;\n                    flex-direction: column;\n                }\n\n                \/* Desktop - ensure black background fills entire screen *\/\n                @media (min-width: 769px) {\n                    .tiktok-video-content {\n                        background: #000;\n                        min-height: 100vh;\n                    }\n\n                    .tiktok-style-container {\n                        background: #000;\n                    }\n                }\n\n                .tiktok-video-player {\n                    flex: 1;\n                    position: relative;\n                    background: #000;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                .tiktok-video-player iframe,\n                .tiktok-video-player video {\n                    width: 100%;\n                    height: 100%;\n                    object-fit: cover;\n                    border-radius: 0;\n                }\n\n                \/* Desktop video sizing - show video in natural size with black background *\/\n                @media (min-width: 769px) {\n                    .tiktok-video-player {\n                        background: #000;\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                        min-height: 100vh;\n                    }\n\n                    .tiktok-video-player iframe,\n                    .tiktok-video-player video {\n                        width: auto;\n                        height: auto;\n                        max-width: 100%;\n                        max-height: 100vh;\n                        object-fit: contain;\n                        margin: 0 auto;\n                    }\n\n                    \/* Ensure video maintains aspect ratio and is centered *\/\n                    .tiktok-video-player iframe {\n                        aspect-ratio: 16\/9;\n                        display: block;\n                        margin: 0 auto;\n                    }\n\n                    .tiktok-video-player video {\n                        aspect-ratio: 16\/9;\n                        display: block;\n                        margin: 0 auto;\n                    }\n                }\n\n                .tiktok-video-info {\n                    position: absolute;\n                    bottom: 0;\n                    left: 0;\n                    right: 0;\n                    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\n                    color: white;\n                    padding: 20px;\n                    z-index: 10;\n                }\n\n                .tiktok-property-title {\n                    font-size: 18px;\n                    font-weight: 600;\n                    margin-bottom: 10px;\n                    line-height: 1.3;\n                }\n\n                .tiktok-agent-info {\n                    display: flex;\n                    align-items: center;\n                    margin-bottom: 15px;\n                }\n\n                .tiktok-agent-avatar {\n                    width: 40px;\n                    height: 40px;\n                    border-radius: 50%;\n                    background: #333;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    margin-right: 10px;\n                    font-size: 18px;\n                }\n\n                .tiktok-agent-details h4 {\n                    margin: 0;\n                    font-size: 14px;\n                    font-weight: 600;\n                }\n\n                .tiktok-agent-details h4 a {\n                    text-decoration: none;\n                    transition: all 0.3s ease;\n                }\n\n                .tiktok-agent-details h4 a:hover {\n                    color: #ff0050 !important;\n                    text-shadow: 0 0 10px rgba(255, 0, 80, 0.5);\n                }\n\n                .tiktok-agent-details p {\n                    margin: 0;\n                    font-size: 12px;\n                    opacity: 0.8;\n                }\n\n                .tiktok-property-header {\n                    display: flex;\n                    align-items: center;\n                    gap: 15px;\n                    margin-bottom: 15px;\n                }\n\n                .tiktok-property-image {\n                    width: 60px;\n                    height: 60px;\n                    border-radius: 8px;\n                    overflow: hidden;\n                    flex-shrink: 0;\n                }\n\n                .property-thumbnail {\n                    width: 100%;\n                    height: 100%;\n                    object-fit: cover;\n                }\n\n                .property-placeholder {\n                    width: 100%;\n                    height: 100%;\n                    background: #333;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    color: #666;\n                    font-size: 24px;\n                }\n\n                .agent-avatar-img {\n                    width: 100%;\n                    height: 100%;\n                    object-fit: cover;\n                    border-radius: 50%;\n                }\n\n                .tiktok-property-details {\n                    flex: 1;\n                }\n\n                .tiktok-agent-info {\n                    display: flex;\n                    align-items: center;\n                    gap: 10px;\n                    margin-left: auto;\n                }\n\n                .tiktok-agent-avatar {\n                    width: 40px;\n                    height: 40px;\n                    border-radius: 50%;\n                    overflow: hidden;\n                    flex-shrink: 0;\n                    background: rgba(255, 255, 255, 0.1);\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    color: white;\n                    font-size: 16px;\n                }\n\n                .tiktok-agent-details h4 {\n                    margin: 0;\n                    font-size: 14px;\n                    font-weight: 500;\n                }\n\n                .tiktok-agent-details p {\n                    margin: 0;\n                    font-size: 12px;\n                    opacity: 0.8;\n                }\n\n                \/* Tooltip styles *\/\n                .tiktok-action-btn[title]:hover::after {\n                    content: attr(title);\n                    position: absolute;\n                    bottom: -35px;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    background: rgba(0, 0, 0, 0.8);\n                    color: white;\n                    padding: 5px 10px;\n                    border-radius: 4px;\n                    font-size: 12px;\n                    white-space: nowrap;\n                    z-index: 1000;\n                    pointer-events: none;\n                }\n\n                .tiktok-action-btn[title]:hover::before {\n                    content: '';\n                    position: absolute;\n                    bottom: -25px;\n                    left: 50%;\n                    transform: translateX(-50%);\n                    border: 5px solid transparent;\n                    border-bottom-color: rgba(0, 0, 0, 0.8);\n                    z-index: 1000;\n                    pointer-events: none;\n                }\n\n                .tiktok-actions {\n                    position: absolute;\n                    right: 20px;\n                    bottom: 120px;\n                    display: flex;\n                    flex-direction: column;\n                    gap: 25px;\n                    z-index: 10;\n                }\n\n                .tiktok-action-btn {\n                    width: 60px;\n                    height: 60px;\n                    border-radius: 50%;\n                    background: transparent;\n                    border: none;\n                    color: white;\n                    display: flex;\n                    flex-direction: column;\n                    align-items: center;\n                    justify-content: center;\n                    font-size: 24px;\n                    cursor: pointer;\n                    transition: all 0.3s ease;\n                    margin-bottom: 15px;\n                    position: relative;\n                }\n\n                .tiktok-action-btn .icon-wrapper {\n                    width: 24px;\n                    height: 24px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                .tiktok-action-btn .icon-wrapper svg {\n                    width: 100%;\n                    height: 100%;\n                    fill: currentColor;\n                }\n\n                .tiktok-action-btn:hover {\n                    transform: scale(1.2);\n                }\n\n                .tiktok-action-btn:active {\n                    transform: scale(0.9);\n                }\n\n                .tiktok-action-btn .action-count {\n                    font-size: 14px;\n                    margin-top: 4px;\n                    font-weight: 700;\n                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n                }\n\n                .tiktok-action-btn.liked {\n                    color: #ff0050;\n                    background: rgba(255, 0, 80, 0.2);\n                    border-color: #ff0050;\n                }\n\n                .tiktok-action-btn.liked:hover {\n                    background: rgba(255, 0, 80, 0.3);\n                }\n\n                .tiktok-navigation {\n                    position: fixed;\n                    top: 50%;\n                    transform: translateY(-50%);\n                    z-index: 100;\n                    width: 100%;\n                    pointer-events: none;\n                }\n\n                .tiktok-nav-btn {\n                    position: absolute;\n                    top: 50%;\n                    transform: translateY(-50%);\n                    width: 60px;\n                    height: 60px;\n                    border-radius: 50%;\n                    background: transparent;\n                    border: none;\n                    color: white;\n                    font-size: 24px;\n                    cursor: pointer;\n                    transition: all 0.3s ease;\n                    pointer-events: all;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                .tiktok-nav-btn .icon-wrapper {\n                    width: 28px;\n                    height: 28px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                .tiktok-nav-btn .icon-wrapper svg {\n                    width: 100%;\n                    height: 100%;\n                    fill: currentColor;\n                }\n\n                .tiktok-nav-btn.prev {\n                    left: 30px;\n                }\n\n                .tiktok-nav-btn.next {\n                    right: 30px;\n                }\n\n                .tiktok-nav-btn:hover {\n                    transform: translateY(-50%) scale(1.2);\n                }\n\n                .tiktok-nav-btn:active {\n                    transform: translateY(-50%) scale(0.9);\n                }\n\n                .tiktok-progress {\n                    position: fixed;\n                    top: 0;\n                    left: 0;\n                    right: 0;\n                    height: 3px;\n                    background: rgba(255, 255, 255, 0.2);\n                    z-index: 100;\n                }\n\n                .tiktok-progress-bar {\n                    height: 100%;\n                    background: #ff0050;\n                    width: 0%;\n                    transition: width 0.3s ease;\n                }\n\n                .tiktok-close-btn {\n                    position: fixed;\n                    top: 20px;\n                    right: 20px;\n                    z-index: 10000;\n                }\n\n                .close-btn {\n                    width: 50px;\n                    height: 50px;\n                    border-radius: 50%;\n                    background: transparent;\n                    border: none;\n                    color: white;\n                    font-size: 20px;\n                    cursor: pointer;\n                    transition: all 0.3s ease;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                .close-btn .icon-wrapper {\n                    width: 20px;\n                    height: 20px;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                }\n\n                .close-btn .icon-wrapper svg {\n                    width: 100%;\n                    height: 100%;\n                    fill: currentColor;\n                }\n\n                .close-btn:hover {\n                    transform: scale(1.2);\n                }\n\n                .close-btn:active {\n                    transform: scale(0.9);\n                }\n\n                \/* Mobile adjustments *\/\n                @media (max-width: 768px) {\n                    .tiktok-actions {\n                        right: 10px;\n                        bottom: 80px;\n                        gap: 15px;\n                    }\n\n                    .tiktok-action-btn {\n                        width: 50px;\n                        height: 50px;\n                        font-size: 20px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .tiktok-action-btn .icon-wrapper {\n                        width: 20px;\n                        height: 20px;\n                    }\n\n                    .tiktok-action-btn .action-count {\n                        font-size: 11px;\n                    }\n\n                    .tiktok-nav-btn {\n                        width: 50px;\n                        height: 50px;\n                        font-size: 20px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .tiktok-nav-btn .icon-wrapper {\n                        width: 22px;\n                        height: 22px;\n                    }\n\n                    .tiktok-nav-btn.prev {\n                        left: 10px;\n                    }\n\n                    .tiktok-nav-btn.next {\n                        right: 10px;\n                    }\n\n                    .close-btn {\n                        width: 40px;\n                        height: 40px;\n                        font-size: 16px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .close-btn .icon-wrapper {\n                        width: 16px;\n                        height: 16px;\n                    }\n\n                    .tiktok-property-header {\n                        gap: 10px;\n                    }\n\n                    .tiktok-property-image {\n                        width: 50px;\n                        height: 50px;\n                    }\n\n                    .tiktok-property-title {\n                        font-size: 16px;\n                    }\n\n                    .tiktok-agent-avatar {\n                        width: 35px;\n                        height: 35px;\n                        font-size: 14px;\n                    }\n\n                    .tiktok-agent-details h4 {\n                        font-size: 13px;\n                    }\n\n                    .tiktok-agent-details p {\n                        font-size: 11px;\n                    }\n                }\n\n                \/* Desktop adjustments *\/\n                @media (min-width: 769px) {\n                    .tiktok-actions {\n                        right: 25px;\n                        bottom: 120px;\n                        gap: 20px;\n                    }\n\n                    .tiktok-action-btn {\n                        width: 65px;\n                        height: 65px;\n                        font-size: 26px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .tiktok-action-btn .icon-wrapper {\n                        width: 26px;\n                        height: 26px;\n                    }\n\n                    .tiktok-action-btn .action-count {\n                        font-size: 14px;\n                    }\n\n                    .tiktok-nav-btn {\n                        width: 65px;\n                        height: 65px;\n                        font-size: 26px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .tiktok-nav-btn .icon-wrapper {\n                        width: 30px;\n                        height: 30px;\n                    }\n\n                    .tiktok-nav-btn.prev {\n                        left: 25px;\n                    }\n\n                    .tiktok-nav-btn.next {\n                        right: 25px;\n                    }\n\n                    .close-btn {\n                        width: 50px;\n                        height: 50px;\n                        font-size: 20px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .close-btn .icon-wrapper {\n                        width: 20px;\n                        height: 20px;\n                    }\n\n                    .tiktok-property-header {\n                        gap: 20px;\n                    }\n\n                    .tiktok-property-image {\n                        width: 70px;\n                        height: 70px;\n                    }\n\n                    .tiktok-property-title {\n                        font-size: 20px;\n                    }\n\n                    .tiktok-agent-avatar {\n                        width: 45px;\n                        height: 45px;\n                        font-size: 18px;\n                    }\n\n                    .tiktok-agent-details h4 {\n                        font-size: 16px;\n                    }\n\n                    .tiktok-agent-details p {\n                        font-size: 13px;\n                    }\n                }\n\n                \/* Tablet adjustments *\/\n                @media (min-width: 481px) and (max-width: 768px) {\n                    .tiktok-actions {\n                        right: 15px;\n                        bottom: 100px;\n                    }\n\n                    .tiktok-action-btn {\n                        width: 55px;\n                        height: 55px;\n                        font-size: 22px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .tiktok-action-btn .icon-wrapper {\n                        width: 22px;\n                        height: 22px;\n                    }\n\n                    .tiktok-nav-btn {\n                        width: 55px;\n                        height: 55px;\n                        font-size: 22px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .tiktok-nav-btn .icon-wrapper {\n                        width: 24px;\n                        height: 24px;\n                    }\n\n                    .close-btn {\n                        width: 45px;\n                        height: 45px;\n                        font-size: 18px;\n                        background: transparent;\n                        border: none;\n                    }\n\n                    .close-btn .icon-wrapper {\n                        width: 18px;\n                        height: 18px;\n                    }\n\n                    .tiktok-agent-avatar {\n                        width: 40px;\n                        height: 40px;\n                        font-size: 16px;\n                    }\n                }\n            <\/style>\n\n            <div class=\"tiktok-progress\">\n                <div class=\"tiktok-progress-bar\" id=\"tiktok-progress-bar\"><\/div>\n            <\/div>\n\n            <div class=\"tiktok-close-btn\">\n                <button id=\"tiktok-close\" class=\"close-btn\">\n                    <div class=\"icon-wrapper\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" focusable=\"false\"\n                            aria-hidden=\"true\" style=\"pointer-events: none; display: inherit; width: 100%; height: 100%;\">\n                            <path\n                                d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\">\n                            <\/path>\n                        <\/svg>\n                    <\/div>\n                <\/button>\n            <\/div>\n\n            <div class=\"tiktok-navigation\">\n                <button class=\"tiktok-nav-btn prev\" id=\"tiktok-prev\">\n                    <div class=\"icon-wrapper\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"\n                            focusable=\"false\" aria-hidden=\"true\"\n                            style=\"pointer-events: none; display: inherit; width: 100%; height: 100%;\">\n                            <path clip-rule=\"evenodd\"\n                                d=\"M4.116 13.884a1.25 1.25 0 011.768-1.768l4.866 4.866V4a1.25 1.25 0 112.5 0v12.982l4.866-4.866a1.25 1.25 0 011.768 1.768L12 21.768l-7.884-7.884Z\"\n                                fill-rule=\"evenodd\"><\/path>\n                        <\/svg>\n                    <\/div>\n                <\/button>\n                <button class=\"tiktok-nav-btn next\" id=\"tiktok-next\">\n                    <div class=\"icon-wrapper\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"currentColor\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"\n                            focusable=\"false\" aria-hidden=\"true\"\n                            style=\"pointer-events: none; display: inherit; width: 100%; height: 100%;\">\n                            <path clip-rule=\"evenodd\"\n                                d=\"M19.884 10.114a1.25 1.25 0 01-1.768 1.768L13.25 7.016v12.982a1.25 1.25 0 11-2.5 0V7.016l-4.866 4.866a1.25 1.25 0 11-1.768-1.768L12 2.23l7.884 7.884Z\"\n                                fill-rule=\"evenodd\"><\/path>\n                        <\/svg>\n                    <\/div>\n                <\/button>\n            <\/div>\n\n                    <\/div>\n\n        <script>\n            jQuery(document).ready(function ($) {\n                let currentIndex = 0;\n                const totalVideos = 0;\n                const container = $('.tiktok-style-container');\n                let isScrolling = false;\n\n                function updateProgress() {\n                    const scrollTop = container.scrollTop();\n                    const scrollHeight = container[0].scrollHeight - container.height();\n                    const progress = Math.min((scrollTop \/ scrollHeight) * 100, 100);\n                    $('#tiktok-progress-bar').css('width', progress + '%');\n                }\n\n                function getCurrentVideoIndex() {\n                    const scrollTop = container.scrollTop();\n                    const videoHeight = container.height();\n                    return Math.round(scrollTop \/ videoHeight);\n                }\n\n                function scrollToVideo(index) {\n                    if (isScrolling) return;\n                    isScrolling = true;\n\n                    const videoHeight = container.height();\n                    container.animate({\n                        scrollTop: index * videoHeight\n                    }, 500, function () {\n                        isScrolling = false;\n                    });\n                }\n\n                function nextVideo() {\n                    if (currentIndex < totalVideos - 1) {\n                        pauseAllVideos();\n                        currentIndex++;\n                        scrollToVideo(currentIndex);\n                        setTimeout(playCurrentVideo, 300);\n                    }\n                }\n\n                function prevVideo() {\n                    if (currentIndex > 0) {\n                        pauseAllVideos();\n                        currentIndex--;\n                        scrollToVideo(currentIndex);\n                        setTimeout(playCurrentVideo, 300);\n                    }\n                }\n\n                \/\/ Navigation buttons\n                $('#tiktok-next').on('click', nextVideo);\n                $('#tiktok-prev').on('click', prevVideo);\n\n                \/\/ Close button\n                $('#tiktok-close').on('click', function () {\n                    $('.tiktok-style-container').fadeOut(300, function () {\n                        $(this).remove();\n                    });\n                });\n\n                \/\/ Scroll detection with throttling\n                let scrollTimeout;\n                container.on('scroll', function () {\n                    clearTimeout(scrollTimeout);\n                    scrollTimeout = setTimeout(function () {\n                        if (!isScrolling) {\n                            currentIndex = getCurrentVideoIndex();\n                            updateProgress();\n                        }\n                    }, 100);\n                });\n\n                \/\/ Touch\/swipe support\n                let startY = 0;\n                let startX = 0;\n                let isTouchScrolling = false;\n\n                container.on('touchstart', function (e) {\n                    startY = e.originalEvent.touches[0].clientY;\n                    startX = e.originalEvent.touches[0].clientX;\n                    isTouchScrolling = false;\n                });\n\n                container.on('touchmove', function (e) {\n                    const currentY = e.originalEvent.touches[0].clientY;\n                    const currentX = e.originalEvent.touches[0].clientX;\n                    const diffY = Math.abs(startY - currentY);\n                    const diffX = Math.abs(startX - currentX);\n\n                    if (diffY > diffX && diffY > 10) {\n                        isTouchScrolling = true;\n                    }\n                });\n\n                container.on('touchend', function (e) {\n                    if (!isTouchScrolling) return;\n\n                    const endY = e.originalEvent.changedTouches[0].clientY;\n                    const endX = e.originalEvent.changedTouches[0].clientX;\n                    const diffY = startY - endY;\n                    const diffX = startX - endX;\n\n                    \/\/ Vertical swipe with minimum distance\n                    if (Math.abs(diffY) > Math.abs(diffX) && Math.abs(diffY) > 30) {\n                        if (diffY > 0) {\n                            nextVideo(); \/\/ Swipe up\n                        } else {\n                            prevVideo(); \/\/ Swipe down\n                        }\n                    }\n                });\n\n                \/\/ Enhanced keyboard navigation\n                $(document).on('keydown', function (e) {\n                    \/\/ Prevent default for all our keys\n                    if (['ArrowUp', 'ArrowDown', ' ', 'Escape', 'Enter'].includes(e.key)) {\n                        e.preventDefault();\n                    }\n\n                    if (e.key === 'ArrowUp') {\n                        prevVideo();\n                    } else if (e.key === 'ArrowDown') {\n                        nextVideo();\n                    } else if (e.key === ' ') {\n                        \/\/ Toggle play\/pause for current video\n                        const currentVideo = container.find('.tiktok-video-item').eq(currentIndex);\n                        const video = currentVideo.find('video')[0];\n                        if (video) {\n                            if (video.paused) {\n                                video.play();\n                            } else {\n                                video.pause();\n                            }\n                        }\n                    } else if (e.key === 'Escape') {\n                        \/\/ Close full screen\n                        $('#tiktok-close').click();\n                    } else if (e.key === 'Enter') {\n                        \/\/ Open current property\n                        const currentVideo = container.find('.tiktok-video-item').eq(currentIndex);\n                        const propertyLink = currentVideo.find('.tiktok-property-title a').attr('href');\n                        if (propertyLink) {\n                            window.open(propertyLink, '_blank');\n                        }\n                    }\n                });\n\n                \/\/ Mouse wheel navigation with throttling\n                let wheelTimeout;\n                container.on('wheel', function (e) {\n                    e.preventDefault();\n                    clearTimeout(wheelTimeout);\n                    wheelTimeout = setTimeout(function () {\n                        if (e.originalEvent.deltaY > 0) {\n                            nextVideo();\n                        } else {\n                            prevVideo();\n                        }\n                    }, 150);\n                });\n\n                \/\/ Like functionality with animation\n                $('.like-btn').on('click', function () {\n                    const btn = $(this);\n                    const propertyId = btn.data('property-id');\n                    const countSpan = btn.find('.action-count');\n                    let currentCount = parseInt(countSpan.text()) || 0;\n\n                    if (btn.hasClass('liked')) {\n                        btn.removeClass('liked');\n                        countSpan.text(currentCount - 1);\n                    } else {\n                        btn.addClass('liked');\n                        countSpan.text(currentCount + 1);\n\n                        \/\/ Add animation\n                        btn.css('transform', 'scale(1.2)');\n                        setTimeout(() => {\n                            btn.css('transform', 'scale(1)');\n                        }, 200);\n                    }\n                });\n\n                \/\/ Comment functionality\n                $('.comment-btn').on('click', function () {\n                    const propertyId = $(this).data('property-id');\n                    \/\/ Open property page in new tab for comments\n                    window.open('https:\/\/osoulk.com\/ar\/property\/?id=' + propertyId + '#comments', '_blank');\n                });\n\n                \/\/ Share functionality\n                $('.share-tiktok-video').on('click', function () {\n                    const url = $(this).data('url');\n                    const title = $(this).data('title');\n\n                    if (navigator.share) {\n                        navigator.share({\n                            title: title,\n                            url: url\n                        });\n                    } else {\n                        navigator.clipboard.writeText(url).then(() => {\n                            alert('Link copied to clipboard!');\n                        });\n                    }\n                });\n\n                \/\/ Auto-scroll to next video after 15 seconds (longer for better viewing)\n                setInterval(function () {\n                    if (totalVideos > 1 && currentIndex < totalVideos - 1) {\n                        nextVideo();\n                    }\n                }, 15000);\n\n                \/\/ Pause auto-scroll when user is interacting\n                let userInteracting = false;\n                let interactionTimeout;\n\n                function resetUserInteraction() {\n                    userInteracting = true;\n                    clearTimeout(interactionTimeout);\n                    interactionTimeout = setTimeout(() => {\n                        userInteracting = false;\n                    }, 5000);\n                }\n\n                \/\/ Track user interactions\n                container.on('scroll touchstart touchmove wheel keydown', function () {\n                    resetUserInteraction();\n                });\n\n                \/\/ Modified auto-scroll that respects user interaction\n                setInterval(function () {\n                    if (!userInteracting && totalVideos > 1 && currentIndex < totalVideos - 1) {\n                        nextVideo();\n                    }\n                }, 15000);\n\n                \/\/ Auto-play management\n                function playCurrentVideo() {\n                    const currentVideo = container.find('.tiktok-video-item').eq(currentIndex);\n                    const video = currentVideo.find('video')[0];\n                    const iframe = currentVideo.find('iframe')[0];\n\n                    if (video) {\n                        video.play().catch(e => console.log('Autoplay prevented:', e));\n                    }\n\n                    if (iframe) {\n                        \/\/ Try to trigger autoplay for iframes\n                        const src = iframe.src;\n                        if (src.indexOf('autoplay') === -1) {\n                            iframe.src = src + (src.indexOf('?') !== -1 ? '&' : '?') + 'autoplay=1&mute=1';\n                        }\n                    }\n                }\n\n                function pauseAllVideos() {\n                    container.find('video').each(function () {\n                        this.pause();\n                    });\n                }\n\n                \/\/ Enhanced scroll detection with video control\n                container.on('scroll', function () {\n                    clearTimeout(scrollTimeout);\n                    scrollTimeout = setTimeout(function () {\n                        if (!isScrolling) {\n                            const newIndex = getCurrentVideoIndex();\n                            if (newIndex !== currentIndex) {\n                                pauseAllVideos();\n                                currentIndex = newIndex;\n                                setTimeout(playCurrentVideo, 100);\n                            }\n                            updateProgress();\n                        }\n                    }, 100);\n                });\n\n                \/\/ Play first video on load\n                setTimeout(playCurrentVideo, 500);\n\n                \/\/ Initialize\n                updateProgress();\n            });\n        <\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-22278","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/pages\/22278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/comments?post=22278"}],"version-history":[{"count":4,"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/pages\/22278\/revisions"}],"predecessor-version":[{"id":22283,"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/pages\/22278\/revisions\/22283"}],"wp:attachment":[{"href":"https:\/\/osoulk.com\/ar\/wp-json\/wp\/v2\/media?parent=22278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}