CODEWITHSUNDEEP
javascripthtmlangular
argonx
argonx

Reputation: 75

How to show html video controls only after first click?

I have a page with a video section that I have coded on. I want to hide the video controls (the horizontal bar below with the play button and the progress bar) until the video is clicked. It should be hidden and should show only after the video is clicked. How can I do this? Thanks

<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>

Upvotes: 2

Views: 1068

Answers (1)

Tom
Tom

Reputation: 159

Remove the controls attribute from the video element, then in an onclick listener setAttribute("controls", "true") for the video element.

Upvotes: 2

Related Questions