
        <section class="video-section">
        <div class="auto-container">
         <div class="sec-title text-center">
                <div class="sub-title">Videos</div>
                <h2>Explore my video</h2>
            </div>         
                
<div class="interview-video-section-container">
    <div class="row">

        <!-- Main Video: Full Width -->
        <div class="col-12">
            <iframe
                id="mainVideo"
                width="100%"
                height="500"
                src="https://www.youtube.com/embed/j9QchBLrQWg"
                frameborder="0"
                allowfullscreen>
            </iframe>
        </div>

        <!-- Video List Below -->
        <div class="col-12 mt-4" id="bellow-video">
            <div class="video-list-container">

                <div class="video-item" onclick="changeVideo('Jg8sUojDgXw')">
                    <img src="https://img.youtube.com/vi/Jg8sUojDgXw/hqdefault.jpg" alt="Video Title 1">
                    <h6>Video Title 1</h6>
                </div>

                <div class="video-item" onclick="changeVideo('j9QchBLrQWg')">
                    <img src="https://img.youtube.com/vi/j9QchBLrQWg/hqdefault.jpg" alt="Video Title 2">
                    <h6>Video Title 2</h6>
                </div>

                <div class="video-item" onclick="changeVideo('j9QchBLrQWg')">
                    <img src="https://img.youtube.com/vi/Jg8sUojDgXw/hqdefault.jpg" alt="Video Title 3">
                    <h6>Video Title 3</h6>
                </div>

                <div class="video-item" onclick="changeVideo('j9QchBLrQWg')">
                    <img src="https://img.youtube.com/vi/Jg8sUojDgXw/hqdefault.jpg" alt="Video Title 4">
                    <h6>Video Title 4</h6>
                </div>

            </div>
        </div>

    </div>
</div>

        </div>
    </section>