{"id":15,"date":"2026-11-07T14:44:46","date_gmt":"2026-11-07T14:44:46","guid":{"rendered":"https:\/\/betoob.ir\/?page_id=15"},"modified":"2026-11-07T15:04:04","modified_gmt":"2026-11-07T15:04:04","slug":"%d8%b5%d9%81%d8%ad%d9%87-%d8%a7%d8%b5%d9%84%db%8c","status":"publish","type":"page","link":"https:\/\/betoob.ir\/","title":{"rendered":"\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b697ff e-flex e-con-boxed e-con e-parent\" data-id=\"8b697ff\" 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-2c8b31d elementor-widget elementor-widget-wp-widget-custom_html\" data-id=\"2c8b31d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wp-widget-custom_html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"textwidget custom-html-widget\">    <div class=\"betoob-reels-container\">\r\n         'reel',\r\n            'posts_per_page' =&gt; 10, \/\/ Adjust as needed\r\n            'order'          =&gt; 'DESC', \/\/ Latest reels first\r\n        );\r\n        $reels_query = new WP_Query( $args );\r\n\r\n        if ( $reels_query-&gt;have_posts() ) :\r\n            while ( $reels_query-&gt;have_posts() ) : $reels_query-&gt;the_post();\r\n                $video_url  = get_field('video_url');\r\n                $channel_id = get_field('channel_id');\r\n                \r\n                \/\/ Skip if video_url is not set\r\n                if ( ! $video_url ) {\r\n                    continue; \r\n                }\r\n        ?&gt;\r\n            <div class=\"reel-card\">\r\n                &lt;video class=&quot;reel-video&quot; src=&quot;\" loop playsinline muted&gt;<\/video>\r\n                <div class=\"reel-overlay\">\r\n                    <div class=\"channel-info\">\r\n                        <span class=\"channel-badge\"><\/span>\r\n                    <\/div>\r\n                    <div class=\"reel-actions\">\r\n                        <button class=\"action-btn like-btn\">\r\n                            \r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        &lt;?php\r\n            endwhile;\r\n            wp_reset_postdata();\r\n        else :\r\n            echo &#039;<p style=\"color:#fff;text-align:center;padding-top:40vh;font-size:18px\">\u0647\u06cc\u0686 \u0631\u06cc\u0644\u0632\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f. \u0644\u0637\u0641\u0627\u064b \u0627\u0632 \u067e\u06cc\u0634\u062e\u0648\u0627\u0646 \u0648\u0631\u062f\u067e\u0631\u0633\u060c \u0631\u06cc\u0644\u0632 \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>';\r\n        endif;\r\n        ?&gt;\r\n    <\/div>\r\n\r\n    \r\n    .betoob-reels-container {\r\n        height: 100vh;\r\n        overflow-y: scroll;\r\n        scroll-snap-type: y mandatory;\r\n        background: #000;\r\n        position: relative;\r\n        width: 100%;\r\n        display: flex; \/* Added for flex column layout *\/\r\n        flex-direction: column; \/* Stack reels vertically *\/\r\n        align-items: center; \/* Center items horizontally *\/\r\n    }\r\n    .reel-card {\r\n        height: 100vh;\r\n        scroll-snap-align: start;\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        width: 100%; \/* Ensure card takes full width *\/\r\n        background: #111; \/* Fallback background *\/\r\n    }\r\n    .reel-video {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        display: block; \/* Remove extra space below video *\/\r\n    }\r\n    .reel-overlay {\r\n        position: absolute;\r\n        bottom: 30px;\r\n        left: 20px;\r\n        right: 20px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: flex-end;\r\n        color: #fff;\r\n        pointer-events: none;\r\n        z-index: 10; \/* Ensure overlay is above video *\/\r\n    }\r\n    .reel-overlay &gt; * { pointer-events: auto; }\r\n    .channel-info {\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n    .channel-badge {\r\n        background: rgba(0,0,0,0.6);\r\n        padding: 8px 14px;\r\n        border-radius: 20px;\r\n        font-size: 14px;\r\n        font-weight: bold;\r\n        backdrop-filter: blur(5px);\r\n    }\r\n    .reel-actions {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n    .action-btn {\r\n        background: rgba(0,0,0,0.5);\r\n        border: none;\r\n        color: #fff;\r\n        width: 45px;\r\n        height: 45px;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        backdrop-filter: blur(5px);\r\n        margin-bottom: 10px; \/* Space between buttons *\/\r\n    }\r\n    .action-btn svg {\r\n        transition: fill 0.3s ease;\r\n    }\r\n    .action-btn.liked { color: #ff3b30; }\r\n    .action-btn.liked svg { fill: #ff3b30; stroke: #ff3b30; }\r\n    \r\n\r\n    \r\n    function toggleLike(btn) {\r\n        btn.classList.toggle('liked');\r\n        let svg = btn.querySelector('svg');\r\n        if (btn.classList.contains('liked')) {\r\n            svg.setAttribute('fill', '#ff3b30');\r\n            svg.setAttribute('stroke', '#ff3b30'); \/\/ Also change stroke for liked state\r\n        } else {\r\n            svg.setAttribute('fill', 'none');\r\n            svg.setAttribute('stroke', 'currentColor'); \/\/ Reset stroke\r\n        }\r\n    }\r\n\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        const container = document.querySelector('.betoob-reels-container');\r\n        if (!container) return;\r\n\r\n        const videos = container.querySelectorAll('.reel-video');\r\n        if (videos.length === 0) return;\r\n\r\n        const observer = new IntersectionObserver((entries) =&gt; {\r\n            entries.forEach(entry =&gt; {\r\n                const video = entry.target;\r\n                if (entry.isIntersecting) {\r\n                    \/\/ Check if it's the first visible video or if it should play\r\n                    if (!video.closest('.reel-card').classList.contains('currently-playing') || window.location.hash === `#reel-${video.closest('.reel-card').dataset.reelId}`) {\r\n                         video.play().catch(e =&gt; console.log(\"Autoplay was prevented:\", e));\r\n                         \/\/ Remove previous playing class\r\n                         document.querySelectorAll('.reel-card.currently-playing').forEach(card =&gt; card.classList.remove('currently-playing'));\r\n                         video.closest('.reel-card').classList.add('currently-playing');\r\n                    }\r\n                } else {\r\n                    video.pause();\r\n                    video.currentTime = 0; \/\/ Reset video to start\r\n                    video.closest('.reel-card').classList.remove('currently-playing');\r\n                }\r\n            });\r\n        }, {\r\n            threshold: 0.8 \/\/ Trigger when 80% of the video is visible\r\n        });\r\n\r\n        videos.forEach((video, index) =&gt; {\r\n            video.closest('.reel-card').dataset.reelId = index; \/\/ Add data-reel-id for potential deep linking\r\n            observer.observe(video);\r\n        });\r\n\r\n        \/\/ Handle initial load and potential hash for deep linking\r\n        const initialVideoIndex = window.location.hash ? parseInt(window.location.hash.replace('#reel-', '')) : 0;\r\n        if (!isNaN(initialVideoIndex) &amp;&amp; initialVideoIndex  console.log(\"Initial autoplay prevented:\", e));\r\n                 document.querySelectorAll('.reel-card.currently-playing').forEach(card =&gt; card.classList.remove('currently-playing'));\r\n                firstVideoToPlay.closest('.reel-card').classList.add('currently-playing');\r\n            }\r\n        } else {\r\n             \/\/ If no hash or invalid hash, play the very first video\r\n            if (videos.length &gt; 0) {\r\n                 videos[0].play().catch(e =&gt; console.log(\"Initial autoplay prevented:\", e));\r\n                 document.querySelectorAll('.reel-card.currently-playing').forEach(card =&gt; card.classList.remove('currently-playing'));\r\n                 videos[0].closest('.reel-card').classList.add('currently-playing');\r\n            }\r\n        }\r\n\r\n        \/\/ Optional: Add touch scrolling to play next video\r\n        container.addEventListener('scroll', () =&gt; {\r\n            const currentScroll = container.scrollTop;\r\n            const scrollHeight = container.scrollHeight - container.clientHeight;\r\n            const scrollPercentage = (currentScroll \/ scrollHeight) * 100;\r\n\r\n            if (scrollPercentage &gt; 90) { \/\/ If scrolled near the end, could potentially load more if paginating\r\n                \/\/ For now, just ensure the correct video is playing\r\n            }\r\n        });\r\n    });\r\n    \r\n<\/div>\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\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":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/betoob.ir\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/betoob.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/betoob.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/betoob.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/betoob.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":7,"href":"https:\/\/betoob.ir\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/betoob.ir\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/betoob.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}