All files / src/app/shared/cms/components/cms-video cms-video.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (pagelet.hasParam('Video')) {
  <div
    class="video-container"
    [ngClass]="pagelet.stringParam('CSSClass')"
    [ngStyle]="{ 'width.px': videoWidth, 'height.px': videoHeight }"
  >
    @if (iframeVideoUrl) {
      <div class="video-wrapper">
        <!-- spell-checker: words allowfullscreen -->
        <iframe
          allowfullscreen
          frameborder="0"
          loading="lazy"
          [src]="iframeVideoUrl"
          [title]="pagelet?.displayName"
        ></iframe>
      </div>
    } @else {
      <video
        #videoPlayer
        class="video"
        height="auto"
        width="100%"
        [autoplay]="autoplay"
        [controls]="autoplay"
        [muted]="mute"
        [poster]="pagelet.stringParam('Image')"
        [src]="nativeVideoUrl"
        [title]="pagelet?.displayName"
      ></video>
      @if (!autoplay && !playing) {
        <div class="video-text">
          @if (pagelet.hasParam('Heading')) {
            <h1>{{ pagelet.stringParam('Heading') }}</h1>
          }
          <button class="video-link btn btn-link btn-link-action" type="button" (click)="playing = true; playVideo()">
            <i class="bi bi-play-circle"></i>
          </button>
        </div>
      }
    }
  </div>
}