How to stop showing two controls in video player

Question

I am using html player to play videos. And then I added videojs and videojs.ima to show google AdSense. Its working. But there are showing like tow player one is html video player and other is videojs player. Please see attached screenshot.

My code is:

<video class="img-fluid myVideo video-js" id="content_video{{ $video_list->id }}" preload="auto" controls controlsList="nodownload"
    data-video-id="{{ Crypt::encrypt($video_list->id) }}">
    @if (Auth::check())
        @if ($video_list->membershipplan_id == 2 || ($video_list->membershipplan_id == 1 && $video_list->hasPaid == 1) || ($video_list->is_subscription_valid == 1) || ($checkUserSubscriptionPlan == 1))
        <source src="{{ $video_list->full_video_url }}" type="video/mp4" class="full-video">
        @else
        <source src="{{ $video_list->short_video_url }}" type="video/mp4" class="short-video">
        @endif
    @else
        <source src="{{ $video_list->short_video_url }}" type="video/mp4" class="short-video">
    @endif
</video>

The above is in loop and there are multiple videos. I am using laravel.

js is:

document.addEventListener('DOMContentLoaded', function () {
console.log('1');
const videos = document.querySelectorAll('.myVideo');
let playing = [];

videos.forEach((video, index) => {
    const overlay = document.querySelectorAll('.overlay')[index];
    const paymentoverlay = document.querySelectorAll('.paymentoverlay')[index];

    // Create a single player instance for each video
    const player = videojs(video.id);

    var options = {
        id: 'content_video',  // Use the correct ID for each video element
        adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator='
    };

    player.ima(options);

    video.addEventListener('ended', function() {
        console.log('2');
        // Handle video conditions after it finishes
        handleVideoConditions(video, overlay, paymentoverlay);
    });

    video.onplay = function () {
        console.log('3');
        playing.push(video);
        if (!video.paused) {
            video.controls = true;
            // Trigger an AJAX request to register the view
            registerView(video);
        }
    };
});

function handleVideoConditions(video, overlay, paymentoverlay) {
    console.log('4');
    const isShortVideo = video.querySelector('.short-video');
    const isFullVideo = video.querySelector('.full-video');
    if (!isUserLoggedIn && isShortVideo) {
        console.log('5');
        overlay.style.display = 'block';
    } else if (isUserLoggedIn && isShortVideo) {
        console.log('6');
        paymentoverlay.style.display = 'block';
    }
}    

async function registerView(video) {
    const videoId = video.getAttribute('data-video-id');
    const response = await fetch(`{{ route('video.registerView', ['videoId' => ':videoId']) }}`.replace(':videoId', videoId));
    const data = await response.json();
    $('#videoview'+data.id).html(data.view_count);
}
});

Using below css and js:

 <link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />
<script src="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
<script src="//googleads.github.io/videojs-ima/dist/videojs.ima.js"></script>

Answer 1

I got my solution and it was so easy. I find class at inspect element and just hide the class.

.vjs-has-started .vjs-control-bar {
    display: none;
}

Now visible only single player control.