‘reel’,
‘posts_per_page’ => 10,
);
$reels_query = new WP_Query( $args );
if ( $reels_query->have_posts() ) :
while ( $reels_query->have_posts() ) : $reels_query->have_posts(); $reels_query->the_post();
$video_url = get_field(‘video_url’);
$channel_id = get_field(‘channel_id’);
if ( ! $video_url ) continue;
?>
.betoob-reels-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
background: #000;
position: relative;
width: 100%;
}
.reel-card {
height: 100vh;
scroll-snap-align: start;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #111;
}
.reel-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.reel-overlay {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
color: #fff;
pointer-events: none;
}
.reel-overlay > * { pointer-events: auto; }
.channel-badge {
background: rgba(0,0,0,0.6);
padding: 8px 14px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
backdrop-filter: blur(5px);
}
.action-btn {
background: rgba(0,0,0,0.5);
border: none;
color: #fff;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
backdrop-filter: blur(5px);
}
.action-btn:active { transform: scale(0.9); }
.action-btn.liked { color: #ff3b30; fill: #ff3b30; }
function toggleLike(btn) {
btn.classList.toggle(‘liked’);
let svg = btn.querySelector(‘svg’);
if (btn.classList.contains(‘liked’)) {
svg.setAttribute(‘fill’, ‘#ff3b30’);
} else {
svg.setAttribute(‘fill’, ‘none’);
}
}
// Auto play/pause videos on scroll
document.addEventListener(“DOMContentLoaded”, function() {
const videos = document.querySelectorAll(‘.reel-video’);
let observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.play().catch(e => console.log(“Autoplay blocked:”, e));
} else {
entry.target.pause();
entry.target.currentTime = 0;
}
});
}, { threshold: 0.6 });
videos.forEach(video => observer.observe(video));
});
<video class="reel-video" src="” loop playsinline muted>
<?php
endwhile;
wp_reset_postdata();
else :
echo 'هیچ ریلزی یافت نشد. لطفاً از پیشخوان وردپرس ریلز جدید اضافه کنید.
‘; endif; ?>