Видеосообщение как в телеграмме wordpress (function php)

Как можно реализовать отображение видео в кружочке с добавлением его таймлайна вокруг него(Как в телеграмме кружочки) Вот что есть на данный момент.

    function RealHistory_shortcode($atts) {
    ob_start();

    $args = array(
        'post_type' => 'staff-history',
        'posts_per_page' => -1
    );
    $real_history = new WP_Query($args);

    if ($real_history->have_posts()) : 
        ?>
        <div id="real-history-slider" class="slider">
            <div class="slides">
                <?php
                while ($real_history->have_posts()) : $real_history->the_post(); 
                    $name = get_field('name');
                    $post = get_field('post');
                    $description = get_field('description');
                    $video = get_field('video'); // Предполагается, что это поле может быть массивом
                    
                    // Если $video является массивом, извлекаем URL видео
                    if (is_array($video) && isset($video['url'])) {
                        $video_url = $video['url'];
                    } else {
                        $video_url = $video;
                    }
                    ?>
                    <div class="slide">
                        <div class="profile">
                            <div class="video-container">
                                <?php if (!empty($video_url)) : ?>
                                    <div class="video-wrapper">
                                        <video autoplay muted loop>
                                            <source src="<?php echo esc_url($video_url); ?>" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        
                                    </div>
                                    <button class="mute-toggle">?</button>
                                <?php endif; ?>
                            </div>
                            <div class="profile-info">
                                <h3><?php echo esc_html($name); ?></h3>
                                <p><?php echo esc_html($post); ?></p>
                            </div>
                        </div>
                        <div class="description">
                            <p><?php echo esc_html($description); ?></p>
                        </div>
                    </div>
                    <?php 
                endwhile; 
                ?>
            </div>
            <div class="controls">
                <button class="prev">&#9664;</button>
                <button class="next">&#9654;</button>
            </div>
            <div class="dots"></div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const slides = document.querySelectorAll('#real-history-slider .slide');
                const prevButton = document.querySelector('#real-history-slider .prev');
                const nextButton = document.querySelector('#real-history-slider .next');
                const dotsContainer = document.querySelector('#real-history-slider .dots');
                const muteButtons = document.querySelectorAll('.mute-toggle');
                let currentSlide = 0;

                function updateSlider() {
                    document.querySelector('#real-history-slider .slides').style.transform = `translateX(-${currentSlide * 100}%)`;
                    document.querySelectorAll('#real-history-slider .dot').forEach((dot, index) => {
                        dot.classList.toggle('active', index === currentSlide);
                    });
                }

                function createDots() {
                    slides.forEach((_, index) => {
                        const dot = document.createElement('span');
                        dot.classList.add('dot');
                        dot.addEventListener('click', () => {
                            currentSlide = index;
                            updateSlider();
                        });
                        dotsContainer.appendChild(dot);
                    });
                }

                prevButton.addEventListener('click', () => {
                    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
                    updateSlider();
                });

                nextButton.addEventListener('click', () => {
                    currentSlide = (currentSlide + 1) % slides.length;
                    updateSlider();
                });

                muteButtons.forEach(button => {
                    button.addEventListener('click', (e) => {
                        const video = e.target.closest('.video-container').querySelector('video');
                        video.muted = !video.muted;
                        button.textContent =video.muted ? '?' : '?';
                    });
                });

                createDots();
                updateSlider();
            });
        </script>
        <style>
            #real-history-slider {
                position: relative;
                width: 80%;
                margin: auto;
                overflow: hidden;
            }

            .slides {
                display: flex;
                transition: transform 0.5s ease-in-out;
            }

            .slide {
                min-width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                padding: 20px;
                align-items: center;
                background-color: #f5f5f5;
                border-radius: 20px;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            }

            .profile {
                display: flex;
                align-items: center;
                margin-right: 20px;
                flex: 1;
                flex-direction: column;
                justify-content: center;
            }

            .video-container {
                position: relative;
                width: 180px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .video-wrapper {
                position: relative;
                width: 180px;
                height: 180px;
                border-radius: 50%;
                overflow: hidden;
                border: 2px solid #fff;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                
            }
            

            .video-wrapper video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
            }

            .mute-toggle {
                margin-top: 10px;
                background: none;
                border: none;
                font-size: 24px;
                cursor: pointer;
            }

            .profile-info {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .profile-info h3 {
                margin: 5px 0;
                font-size: 18px;
            }

            .profile-info p {
                margin: 0;
                color: gray;
            }

            .description {
                flex: 1;
                margin-left: 20px;
                font-size: 16px;
            }

            .controls {
                position: absolute;
                top: 50%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                transform: translateY(-50%);
            }

            .controls button {
                background: none;
                border: none;
                font-size: 30px;
                cursor: pointer;
            }

            .dots {
                text-align: center;
                padding: 10px;
            }

            .dots .dot {
                display: inline-block;
                width: 10px;
                height: 10px;
                margin: 5px;
                background-color: #bbb;
                border-radius: 50%;
                cursor: pointer;
            }

            .dots .dot.active {
                background-color: rgba(239, 62, 66, 1);
            }
        </style>
        <?php
    else :
        echo '<p>No history found.</p>';
    endif;

    wp_reset_postdata();

    return ob_get_clean();
}
add_shortcode('RealHisotory', 'RealHistory_shortcode');