lazy-load-bg-video/modified-webflow-bg-element.html at main · Webflow-Examples/lazy-load-bg-video · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div
  data-poster-url="https://assets.website-files.com/62ea9b78700b6385dd63aa68/62ea9cec925c8b4b0d0f72c3_coverr--08-20-surfing-waves-cloudy-06-5087-poster-00001.jpg"
  data-video-urls="https://assets.website-files.com/62ea9b78700b6385dd63aa68/62ea9cec925c8b4b0d0f72c3_coverr--08-20-surfing-waves-cloudy-06-5087-transcode.mp4,https://assets.website-files.com/62ea9b78700b6385dd63aa68/62ea9cec925c8b4b0d0f72c3_coverr--08-20-surfing-waves-cloudy-06-5087-transcode.webm"
  data-autoplay="true"
  data-loop="true"
  data-wf-ignore="true"
  class="w-background-video w-background-video-atom"
>
  <video
    class="lazy"
    preload="none"
    id="d9361516-0c98-5382-5de8-647eb32a65d0-video"
    autoplay=""
    loop=""
    style="
      background-image: url('https://assets.website-files.com/62ea9b78700b6385dd63aa68/62ea9cec925c8b4b0d0f72c3_coverr--08-20-surfing-waves-cloudy-06-5087-poster-00001.jpg');
    "
    muted=""
    playsinline=""
    data-wf-ignore="true"
    data-object-fit="cover"
  >
    <source
      type="video/mp4"
      data-src="https://assets.website-files.com/62ea9b78700b6385dd63aa68/62ea9cec925c8b4b0d0f72c3_coverr--08-20-surfing-waves-cloudy-06-5087-transcode.mp4"
      data-wf-ignore="true"
    />
    <source
      type="video/webm"
      data-src="https://assets.website-files.com/62ea9b78700b6385dd63aa68/62ea9cec925c8b4b0d0f72c3_coverr--08-20-surfing-waves-cloudy-06-5087-transcode.webm"
      data-wf-ignore="true"
    /></video
  ><noscript
    ><style>
      [data-wf-bgvideo-fallback-img] {
        display: none;
      }
      @media (prefers-reduced-motion: reduce) {
        [data-wf-bgvideo-fallback-img] {
          position: absolute;
          z-index: -100;
          display: inline-block;
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }</style
    ><img
      data-wf-bgvideo-fallback-img="true"
      src="https://assets.website-files.com/62ea9b78700b6385dd63aa68/62ea9cec925c8b4b0d0f72c3_coverr--08-20-surfing-waves-cloudy-06-5087-poster-00001.jpg"
      alt=""
  /></noscript>
  <div aria-live="polite">
    <button
      aria-controls="d9361516-0c98-5382-5de8-647eb32a65d0-video"
      type="button"
      data-w-bg-video-control="true"
      class="w-backgroundvideo-backgroundvideoplaypausebutton w-background-video--control"
    >
      <span
        ><img
          src="https://assets.website-files.com/6022af993a6b2191db3ed10c/628299f8aa233b83918e24fd_Pause.svg"
          alt="Pause video" /></span
      ><span hidden=""
        ><img
          src="https://assets.website-files.com/6022af993a6b2191db3ed10c/628298b20ae0236682d4b87f_Play-24.svg"
          alt="Play video"
      /></span>
    </button>
  </div>
</div>