Блог

У меня есть страница с разделом видео, на котором я закодировал. Я хочу скрыть элементы управления видео (горизонтальную полосу внизу с кнопкой воспроизведения и индикатором выполнения) до тех пор, пока не будет нажат видео. Он должен быть скрыт и должен отображаться только после нажатия на видео. Как я могу это сделать? Спасибо

 <section class="video-background text-center pb-0 mt-9">
    <div class="container px-0">
    <h2 class="mt-5 mb-4">Take a look at our video!</h2>
    <p class="mb-5 font-weight-normal">One click away</p>
    <div class="position-relative mx-auto px-0 mb-6" 
    >
        <div class="mx-auto" [ngClass] = "{ 'darken' : !btnHide }" (click)="isPlayed ? pauseVideo() : playVideo();" >
        <video #videoEl id="videoPlayer" class="videoDimension py-0 vid-shadow" 
        src="https://www.youtube.com/watch?v=LXb3EKWsInQ"
         allowfullscreen controls></video>
        </div>
        <button (click)="playVideo();" *ngIf="!btnHide" class="btn btn-primary btn-lg pl-5 pr-2 py-2 play-button">Watch video<i class="ml-4 fa fa-caret-right" aria-hidden="true"></i></button>
    </div></div>
</section>
 

Удалите атрибут controls из элемента video, затем в прослушивателе onclick setAttribute("controls", "true") для элемента video.