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
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
      [title]="pagelet?.displayName"
      loading="lazy"
      [src]="iframeVideoUrl"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
  } @else {
  <video
    #videoPlayer
    [src]="nativeVideoUrl"
    class="video"
    width="100%"
    height="auto"
    [autoplay]="autoplay"
    [controls]="autoplay"
    [muted]="mute"
    [poster]="pagelet.stringParam('Image')"
    [title]="pagelet?.displayName"
  ></video>
  @if (!autoplay && !playing) {
  <div class="video-text">
    @if (pagelet.hasParam('Heading')) {
    <h1>{{ pagelet.stringParam('Heading') }}</h1>
    }
    <button type="button" class="video-link btn btn-link btn-link-action" (click)="playing = true; playVideo()">
      <i class="bi bi-play-circle"></i>
    </button>
  </div>
  } }
</div>
}