Vebego Component Library

Hero: Afbeelding compliments 

<section class="org-hero compliments">
    <div class="hero-left">
        <div class="hero-content">
            <div class="hero-content-wrapper">
                <div>
                    <a class="atm-tag " title="This is a tag link" href="#">
                        <span>
                            This is a tag link
                        </span>
                    </a>

                    <h1>
                        <h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
                    </h1>
                    <div class="atm-paragraph text-md">Wij regelen al je facilitaire zaken. Van schoonmaak tot catering, van gebouwbeheer tot technisch onderhoud. En altijd met een verfrissende aanpak, want elke facilitaire situatie verdient een creatieve oplossing op maat.</div>

                    <div class="hero-content-buttons">
                        <a class="atm-button atm-button-primary  button-md no-icon  ">
                            <div class="button-content-wrapper">
                                <span class="button-content">
                                    <span>Onze diensten</span>
                                    <i class="atm-icon  fal fa-arrow-right   "></i>

                                </span>
                            </div>
                            <span class="button-triangle"></span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-right">
        <div class="hero-right-wrapper ">
            <svg class="hero-path-desktop" viewBox="0 0 266 918" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M266 459C148.579 714.478 39.7414 867.445 0 918V0C130.245 178.595 232.103 384.586 266 459Z" fill="white" />
            </svg>
            <svg class="hero-path-mobile" viewBox="0 0 390 66" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 14.5623C112.093 4.21615 222.699 -0.518709 331.607 0.847257C351.406 21.4537 370.871 42.9742 390 65.4039V66.0001H0V14.5623Z" fill="white" />
            </svg>
            <svg class="hero-path-mask" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1921.38 1053.3">
                <path d="M.69,830.4s297.33,128.71,722.76,189.75c18.17,2.61,185.27,21.08,185.27,21.08,306.97,25.68,660.88,8.63,1010.78-110.32" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;" />
                <path d="M634.81,1.4s532.18,394.01,1126.06,417.19c0,0,86.69-92.71,159.04-208.6" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;" />
            </svg>

            <div class="hero-right-variant">
            </div>
        </div>
        <picture class="atm-image ">
            <img class="" src="https://picsum.photos/id/250/768/432" alt="">
        </picture>
    </div>
</section>
 
<section class="org-hero {{#if content}}{{else}} fullwidth {{/if}}{{#if compliments}}compliments{{else}}{{/if}}">
  {{#if content}}
  <div class="hero-left">
    <div class="hero-content">
      <div class="hero-content-wrapper">
        <div>
          {{ render '@tag' }}
          {{#if heading}}
          <h1>{{ render '@heading' h1 heading }}</h1>
          {{/if}}
          {{#if paragraph}}
          {{render '@paragraph' paragraph merge=true}}
          {{/if}}
          <div class="hero-content-buttons">
            {{#each buttonsPrimary}}
            {{render '@button-primary' this merge=true}}
            {{/each}}
            {{#each buttonsSecondary}}
            <div class="py-4">
              {{render '@button-secondary' this merge=true}}
            </div>
            {{/each}}
          </div>
        </div>
      </div>
    </div>
  </div>
  {{/if}}
  <div class="hero-right">
    <div class="hero-right-wrapper {{#if slides}} pointer-events-none {{/if}}">
      {{#if content}}
        <svg class="hero-path-desktop" viewBox="0 0 266 918" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M266 459C148.579 714.478 39.7414 867.445 0 918V0C130.245 178.595 232.103 384.586 266 459Z"
            fill="white" />
        </svg>
        <svg class="hero-path-mobile" viewBox="0 0 390 66" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 14.5623C112.093 4.21615 222.699 -0.518709 331.607 0.847257C351.406 21.4537 370.871 42.9742 390 65.4039V66.0001H0V14.5623Z" fill="white"/>
        </svg>
        {{#if compliments}}
          <svg class="hero-path-mask" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1921.38 1053.3">
                <path d="M.69,830.4s297.33,128.71,722.76,189.75c18.17,2.61,185.27,21.08,185.27,21.08,306.97,25.68,660.88,8.63,1010.78-110.32" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;"/>
                <path d="M634.81,1.4s532.18,394.01,1126.06,417.19c0,0,86.69-92.71,159.04-208.6" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;"/>
          </svg>
        {{/if}}
      {{else}}     
        <svg class="hero-path-mask" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1921.38 1053.3">
              <path d="M.69,830.4s297.33,128.71,722.76,189.75c18.17,2.61,185.27,21.08,185.27,21.08,306.97,25.68,660.88,8.63,1010.78-110.32" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;"/>
              <path d="M634.81,1.4s532.18,394.01,1126.06,417.19c0,0,86.69-92.71,159.04-208.6" style="fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 3.48px;"/>
        </svg>    
      {{/if}}

      <div class="hero-right-variant">
        {{#if gradient }}
        <div class="great-work animate-fade-on-load">
          <svg viewBox="0 0 318 47" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M18.8867396,47 C23.8861706,47 29.6262582,46.1319261 34.4405251,43.1556728 L34.4405251,19.9656992 L19.1336251,19.9656992 L19.1336251,27.8403694 L26.1698614,27.8403694 L26.1698614,38.0092348 C24.3182202,38.6292876 21.6024799,39.1253298 18.8250182,39.1253298 C11.480175,39.1253298 8.88787745,35.0949868 8.88787745,23.5 C8.88787745,12.525066 11.8505033,8.18469657 19.627396,8.18469657 C22.4665791,8.18469657 26.2315827,8.80474934 30.7372428,10.8509235 L32.6506053,2.91424802 C28.9473231,0.992084433 23.1455142,0 19.0101823,0 C6.23385849,0 0,7.31662269 0,23.5 C0,39.8073879 5.67836615,47 18.8867396,47 Z M50.9201312,46.317942 L50.9201312,19.7796834 C53.7593143,20.3997361 58.6353026,20.585752 62.029978,20.585752 L62.029978,11.5949868 C56.7219401,11.5949868 52.3397227,13.5171504 50.056032,15.8733509 L49.3153755,12.091029 L42.6494675,12.091029 L42.6494675,46.317942 L50.9201312,46.317942 Z M82.9130581,47 C87.233554,47 91.9860996,46.1319261 94.70184,44.76781 L94.70184,37.2031662 C90.9368363,39.0013193 87.4804395,39.8693931 83.7771573,39.8693931 C78.2222339,39.8693931 75.3213294,37.9472296 74.8892798,32.3667546 L84.6412565,31.6846966 C92.541592,31.1266491 96.1831529,27.5923483 96.1831529,22.0738786 C96.1831529,15.439314 90.9985577,11.408971 82.6044512,11.408971 C72.1118181,11.408971 66.3717306,17.671504 66.3717306,29.6385224 C66.3717306,41.3575198 71.8649326,47 82.9130581,47 Z M74.8892798,26.7242744 C75.0744439,21.3298153 77.2346919,17.8575198 82.5427298,17.8575198 C85.9374052,17.8575198 87.9742105,19.2836412 87.9742105,22.0118734 C87.9742105,24.7401055 85.9374052,25.9182058 81.6786306,26.2282322 L74.8892798,26.7242744 Z M110.97605,47 C114.679332,47 118.444335,45.6358839 120.974912,43.1556728 L122.147618,46.317942 L128.381476,46.317942 L128.381476,25.298153 C128.381476,16.121372 123.443767,11.408971 114.185561,11.408971 C110.050229,11.408971 104.927355,12.4010554 101.594401,14.0751979 L103.3226,20.7717678 C107.025882,19.2216359 109.865065,18.5395778 112.642527,18.5395778 C117.641958,18.5395778 120.110812,20.6477573 120.110812,25.4221636 L120.110812,25.9802111 C105.359405,26.0422164 99.3724318,29.2664908 99.3724318,36.9551451 C99.3724318,43.3416887 103.569485,47 110.97605,47 Z M112.395641,40.737467 C109.371294,40.737467 107.581374,39.4973615 107.581374,36.8931398 C107.581374,33.3588391 110.97605,31.8087071 120.110812,31.6846966 L120.110812,38.0712401 C118.444335,39.5593668 115.419988,40.737467 112.395641,40.737467 Z M152.156013,46.8759894 C154.624868,46.8759894 156.97028,46.5039578 158.821921,45.6358839 L158.821921,38.6292876 C157.525773,39.0633245 155.550689,39.621372 153.637326,39.621372 C149.872323,39.621372 148.884781,37.4511873 148.884781,33.2348285 L148.884781,19.1596306 L158.821921,19.1596306 L158.821921,12.091029 L148.884781,12.091029 L148.884781,2.66622691 L140.614117,4.46437995 L140.614117,12.091029 L135.552964,12.091029 L135.552964,19.1596306 L140.614117,19.1596306 L140.614117,33.6068602 C140.614117,43.3416887 144.564285,46.8759894 152.156013,46.8759894 Z M188.95376,46.317942 C192.718763,40.055409 196.977538,28.646438 198.458851,20.6477573 L198.520572,20.6477573 C200.063607,28.646438 204.26066,39.9934037 208.087385,46.317942 L211.358617,46.317942 C213.401034,42.9358359 215.516904,38.2008875 217.382735,33.3086665 L218.293316,30.854985 C218.588899,30.0364125 218.876039,29.2190064 219.153238,28.4083016 L219.953516,26.0018267 C220.081425,25.6059433 220.206476,25.213119 220.328479,24.8240457 L221.022441,22.5401527 C221.131508,22.1688509 221.237154,21.8026838 221.339192,21.4423434 L221.906619,19.3557555 C222.688315,16.3473582 223.147399,13.9230031 223.147399,12.5870712 L219.012068,12.5870712 C217.407312,22.3218997 213.457144,33.8548813 209.753862,41.5435356 L209.69214,41.5435356 C205.865415,33.8548813 202.100412,22.3218997 200.372213,12.5870712 L196.730653,12.5870712 C194.940733,22.3218997 191.237451,33.8548813 187.410725,41.5435356 L187.349004,41.5435356 C183.645722,33.8548813 179.633833,22.3218997 178.090798,12.5870712 L173.832024,12.5870712 C173.832024,13.6261294 174.109742,15.3236164 174.600966,17.4422171 L175.072804,19.3557555 L175.072804,19.3557555 L175.640231,21.4423434 L175.640231,21.4423434 L176.294261,23.6687706 L176.294261,23.6687706 L177.025908,26.0018267 L177.025908,26.0018267 L177.826185,28.4083016 C178.103384,29.2190064 178.390524,30.0364125 178.686107,30.854985 L179.596689,33.3086665 C181.46252,38.2008875 183.578389,42.9358359 185.620806,46.317942 L188.95376,46.317942 Z M245.785996,46.9379947 C255.291087,46.9379947 259.796747,41.2955145 259.796747,29.4525066 C259.796747,17.6094987 255.291087,11.9670185 245.785996,11.9670185 C236.280905,11.9670185 231.775245,17.6094987 231.775245,29.4525066 C231.775245,41.2955145 236.280905,46.9379947 245.785996,46.9379947 Z M245.785996,43.1556728 C238.996645,43.1556728 236.09574,39.0633245 236.09574,29.4525066 C236.09574,19.8416887 238.996645,15.7493404 245.785996,15.7493404 C252.575347,15.7493404 255.476251,19.8416887 255.476251,29.4525066 C255.476251,39.0633245 252.575347,43.1556728 245.785996,43.1556728 Z M273.622334,46.317942 L273.622334,19.4076517 C276.276353,17.9195251 280.288242,16.8654354 283.80636,16.8654354 L285.904887,16.8654354 L285.904887,12.5870712 L284.23841,12.5870712 C280.843735,12.5870712 276.338074,13.9511873 273.43717,15.9353562 L273.375449,15.9353562 L272.758235,12.5870712 L269.425281,12.5870712 L269.425281,46.317942 L273.622334,46.317942 Z M296.767848,46.317942 L296.767848,32.676781 C298.619489,31.7467018 300.224245,30.8166227 301.582115,29.9485488 C305.902611,33.8548813 309.976222,38.3812665 313.49434,46.317942 L318,46.317942 C316.765573,41.6675462 310.34655,32.4287599 304.915069,27.5923483 C310.037943,23.6240106 315.778031,16.4313984 316.827294,12.5870712 L312.691962,12.5870712 C308.090914,20.7041257 302.724726,25.0291219 298.123678,27.7981629 L296.767848,28.5844327 L296.767848,28.5844327 L296.767848,0.682058047 L292.570795,0.682058047 L292.570795,46.317942 L296.767848,46.317942 Z"
              fill="white" />
          </svg>
        </div>
        {{/if}}
        {{#if video}}
        <div class="play-video-wrapper">
          <a data-fslightbox href="{{video}}">
            <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="50" cy="50" r="48" stroke="url(#gradient)" stroke-width="5" stroke-linecap="round" />
              <defs>
                <radialGradient id="gradient" cx="1" cy="1" r="1.5">
                  <stop offset="0%" stop-color="#F69915" />
                  <stop offset="100%" stop-color="#990D7F" />
                </radialGradient>
              </defs>
            </svg>
            {{render '@icon'}}
          </a>
        </div>
        {{/if}}
      </div>
    </div>
    {{#if gradient}}
    {{ render '@ambient' }}
    {{/if}}
    {{#if image}}
    {{ render "@image" image }}
    {{/if}}
    {{#if videoThumbnail}}
    {{ render "@image" videoThumbnail }}
    {{/if}}
    {{#if slides}}
    <div class="hero-slider">
      <div class="swiper-container h-full">
        <div class="swiper-wrapper">
          {{#each slides}}
          <div class="swiper-slide">
            {{render "@image" this}}
          </div>
          {{/each}}
        </div>
        <div class="swiper-nav">
          <div class="swiper-button-wrapper">
            <button class="swiper-prev">
              {{render "@icon"}}
            </button>
            <div class="swiper-button-divider"></div>
            <button class="swiper-next">
              {{render "@icon"}}
            </button>
          </div>
          <div class="slider-progress-wrapper">
            <div class="slider-progress"></div>
          </div>
        </div>
      </div>
    </div>
    {{/if}}
    {{#unless content}}
      {{render "@button-primary--icon-only-md"}}
    {{/unless}}
  </div>
</section>
 
{
  "compliments": true,
  "content": true,
  "heading": {
    "text": "Facility",
    "tag": "span"
  },
  "paragraph": {
    "text": "Wij regelen al je facilitaire zaken. Van schoonmaak tot catering, van gebouwbeheer tot technisch onderhoud. En altijd met een verfrissende aanpak, want elke facilitaire situatie verdient een creatieve oplossing op maat."
  },
  "image": {
    "src": "https://picsum.photos/id/250/768/432"
  },
  "buttonsPrimary": [
    {
      "text": "Onze diensten"
    }
  ]
}
  • Content: 
    .org-hero {
    @apply flex flex-col-reverse items-center md:pt-0 mb-16 md:min-h-screen relative;

    @screen md {
        @apply grid grid-cols-5;
    }

    &::after {
        content: '';
        @apply absolute left-0 bottom-0 h-2/6 w-full bg-gradient-to-t from-white hidden md:block;
    }

    &.compliments {
        @apply md:min-h-[90vh] h-[90vh] relative overflow-hidden bg-[#DDD2E6] pb-4 md:pb-0;
        .org-hero&:after {
            display: none !important;
        }
        .hero-right {
            @apply md:min-h-[90vh] h-[90vh];
            .hero-right-wrapper {
                .hero-path-desktop {
                    @apply hidden;
                }
            }

            .swiper {
                @apply relative z-10;
            }

            .swiper-nav {
                @apply hidden;
            }

            .swiper-container {
                @apply z-10;
            }

            .atm-image {
                @apply relative z-10;
                mask-repeat: no-repeat;
                mask-size: cover;
                mask-position: center bottom;
                mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 739 670"><path fill="white" d="M772 0V765.7C772 765.7 403.7 764.9 316.9 765.7C200.5 663 95.2 512.7 95.1 512.5C297 197.3 651.3 0.2 651.7 0Z"/></svg>');
                @media (max-width: theme('screens.xl')) {
                    mask-position: top left;
                }
                @media (max-width: theme('screens.md')) {
                    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 739 670"><path fill="white" d="M-27 -7H738.7C738.7 -7 737.9 361.3 738.7 448.1C636 564.5 485.7 669.8 485.5 669.9C170.3 468 -26.8 113.7 -27 113.4Z"/></svg>');
                    mask-position: top right;
                }
            }
        }
    }

    &.fullwidth {
        @apply lg:m-0 mb-0 p-0 min-h-[90vh] h-[90vh];

        &::after {
            content: none;
        }

        .hero-right {
            @apply md:col-span-5 h-[inherit];

            .hero-right-wrapper {
                @apply overflow-hidden;
            }

            .atm-video {
                @apply p-0 bg-[transparent];

                video {
                    @apply opacity-100;
                }
            }
        }

        .atm-button {
            @apply z-50 bg-secondary-col-1 outline outline-2 outline-white absolute -translate-x-1/2 translate-y-1/2 bottom-0 left-1/2;
        }
    }

    .hero-left {
        @apply md:col-span-2 relative z-20;

        @media (max-width: theme('screens.md')) {
            @apply vebego-container;
        }

        /* Add padding to the column so it aligns with .vebego-container */
        @screen md {
            padding-left: calc((100vw - theme('screens.md')) / 2);
        }

        @screen lg {
            padding-left: calc((100vw - theme('screens.lg')) / 2);
        }

        @screen xl {
            padding-left: calc((100vw - theme('screens.xl')) / 2);
        }

        @screen 2xl {
            padding-left: calc((100vw - theme('screens.2xl')) / 2);
        }

        .hero-content {
            @apply h-full;

            @screen md {
                @apply pl-8 pt-24;
            }

            .hero-content-wrapper {
                @apply md:row-start-2 row-span-2 md:flex md:items-center;

                h1 {
                    @apply my-4 text-secondary-col-1;
                }

                .hero-content-buttons {
                    @apply mt-6;

                    .atm-button {
                        @apply mr-4;
                    }
                }
            }

            .hero-content-work-cta {
                @apply md:row-start-4 md:flex md:items-end hidden lg:w-2/3 xl:w-1/2;
            }
        }
    }

    .hero-right {
        @apply md:col-span-3 relative flex-grow h-[400px] sm:h-[450px] md:h-full w-full;

        .hero-right-wrapper {
            @apply absolute top-0 left-0 z-10 h-full w-full flex flex-col-reverse md:flex-row;

            .hero-path-desktop {
                @apply hidden md:block h-full -translate-x-px;
            }

            .hero-path-mobile {
                @apply md:hidden translate-y-px;
            }

            .hero-path-mask {
                @apply absolute top-1/2 -translate-y-1/2 w-[201%] -left-full md:-left-1/2 md:w-[151%] lg:left-0 lg:w-[101%] lg:h-[90%] lg:top-0 lg:translate-y-0;
            }

            .hero-right-variant {
                @apply flex-grow flex justify-center items-center;

                .great-work {
                    @apply w-full md:ml-12 flex md:hidden lg:flex justify-center md:justify-start;

                    svg {
                        @apply w-48 xl:w-80 block;
                    }
                }
            }
        }

        .atm-image {
            @apply h-full;

            img {
                @apply h-full w-full object-cover;
            }
        }

        .atm-video {
            @apply relative h-full w-full;

            video {
                @apply absolute h-full w-full object-cover top-0 left-0;
            }
        }

        .play-video-wrapper {
            @apply flex justify-center items-center flex-grow;

            a {
                @apply relative z-30 flex justify-center items-center h-24 w-24 bg-white rounded-full;

                svg {
                    @apply h-full w-full absolute top-0;

                    transform: rotate(-90deg);
                    circle {
                        stroke-dasharray: 1000;
                        stroke-dashoffset: 1000;
                    }
                }
                s &:hover {
                    svg circle {
                        animation: dash-in 3s ease forwards;
                    }
                }

                .atm-icon {
                    &:before {
                        content: '\f04b';
                        @apply text-h4 ml-1 text-black fa-solid;
                    }
                }
            }
        }

        .hero-slider {
            @apply h-full w-full;

            .swiper-slide {
                .atm-image {
                    @apply h-full xl:max-h-screen;

                    img {
                        @apply w-full h-full object-cover;
                    }
                }
            }

            .swiper-nav {
                @apply absolute right-12 bottom-12 z-40 bg-white;

                .swiper-button-wrapper {
                    @apply flex items-center;
                }

                .swiper-button-divider {
                    @apply w-px h-8 rotate-12 bg-gray-200;
                }

                .swiper-prev,
                .swiper-next {
                    @apply py-6 px-7;

                    &.swiper-button-disabled {
                        @apply opacity-30;
                    }
                }

                .swiper-prev .atm-icon::before {
                    content: '\f060';
                }

                .swiper-next .atm-icon::before {
                    content: '\f061';
                }

                .slider-progress-wrapper {
                    @apply h-1 relative bg-gradient-to-r from-secondary-col-1 to-links flex justify-end;

                    div {
                        @apply h-full w-0 transition-all bg-gray-100;
                    }
                }
            }
        }

        .social-wrapper {
            @apply hidden lg:block lg:absolute right-0 bottom-0 pr-8 pb-8;
        }
    }
}

@keyframes dash-in {
    to {
        stroke-dashoffset: 0;
    }
}
  • URL: /components/raw/hero/hero.css
  • Filesystem Path: src\components\04-organisms\hero\hero.css
  • Size: 7.9 KB
  • Content: 
    (function () {

    'use strict';

    var imageSliders = document.querySelectorAll('.hero-slider');

    function checkArrows(swiper) {
        if (swiper.isBeginning && swiper.isEnd) {
            $(swiper.navigation.$prevEl).addClass('hide-prevnext');
            $(swiper.navigation.$nextEl).addClass('hide-prevnext');
        } else {
            $(swiper.navigation.$prevEl).removeClass('hide-prevnext');
            $(swiper.navigation.$nextEl).removeClass('hide-prevnext');
        }
    }

    for (var i = 0; i < imageSliders.length; i++) {
        var swiperContainer =
            imageSliders[i].querySelector('.swiper-container');

        new Swiper(swiperContainer, {
            slidesPerView: 1,
            watchOverflow: true,
            effect: 'fade',
            allowTouchMove: false,
            autoplay: {
                delay: 4000,
            },
            navigation: {
                nextEl: '.swiper-next',
                prevEl: '.swiper-prev',
            },
            on: {
                afterInit: function () {
                    checkArrows(this);
                    swiperContainer.querySelector(
                        '.slider-progress'
                    ).style.width = `${
                        100 -
                        ((this.activeIndex + 1) / this.slides.length) * 100
                    }%`;
                },
                resize: function () {
                    checkArrows(this);
                },
                slideChange: function () {
                    swiperContainer.querySelector(
                        '.slider-progress'
                    ).style.width = `${
                        100 -
                        ((this.activeIndex + 1) / this.slides.length) * 100
                    }%`;
                },
            },
        });
    }
})();

// Handle FSllightbox video popups
(function () {
  var trigger = document.getElementById('open-video');
  if (!trigger) return;

  function buildIframe(src) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', src);
    iframe.setAttribute('width', '1280');
    iframe.setAttribute('height', '720');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture');
    iframe.setAttribute('allowfullscreen', '');
    return iframe;
  }

  trigger.addEventListener('click', function (e) {
    e.preventDefault();

    var provider = (trigger.getAttribute('data-video-provider') || '').toLowerCase();
    var src = trigger.getAttribute('data-video-src');
    if (!src) { console.error('No video src on trigger.'); return; }
    if (typeof FsLightbox === 'undefined') { console.error('FsLightbox script not found.'); return; }

    var box = new FsLightbox();

    // Default: let FsLightbox handle supported URLs (YouTube, direct mp4/webm/ogg)
    if (provider === 'youtube') {
      box.props.sources = [src];
      box.props.types = ['youtube'];
    } else if (provider === 'video') {
      box.props.sources = [src];
      box.props.types = ['video'];
    } else if (provider === 'vimeo') {
      // Vimeo needs a custom iframe each time
      box.props.sources = [buildIframe(src)];
    } else {
      // Unknown provider: try URL first; if it fails in your context, switch to iframe
      box.props.sources = [src];
      // Optionally force iframe fallback:
    }
    box.open();
  });
})();
  • URL: /components/raw/hero/hero.js
  • Filesystem Path: src\components\04-organisms\hero\hero.js
  • Size: 3.5 KB

No notes defined.