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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div
  *ngIf="pagelet.hasParam('Video')"
  class="video-container"
  [ngClass]="pagelet.stringParam('CSSClass')"
  [ngStyle]="{ 'width.px': videoWidth, 'height.px': videoHeight }"
>
  <ng-container *ngIf="iframeVideoUrl; else nativeVideo">
    <div class="video-wrapper">
      <!-- spell-checker: words allowfullscreen -->
      <iframe
        [title]="pagelet?.displayName"
        loading="lazy"
        [src]="iframeVideoUrl"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </div>
  </ng-container>
 
  <ng-template #nativeVideo>
    <video
      #videoPlayer
      [src]="nativeVideoUrl"
      class="video"
      width="100%"
      height="auto"
      [autoplay]="autoplay"
      [controls]="autoplay"
      [muted]="mute"
      [poster]="pagelet.stringParam('Image')"
      [title]="pagelet?.displayName"
    ></video>
 
    <div *ngIf="!autoplay && !playing" class="video-text">
      <h1 *ngIf="pagelet.hasParam('Heading')">{{ pagelet.stringParam('Heading') }}</h1>
      <button type="button" class="video-link btn btn-link btn-link-action" (click)="playing = true; playVideo()">
        <fa-icon [icon]="['fas', 'play-circle']" />
      </button>
    </div>
  </ng-template>
</div>