<div class="modal-wrapper js-modal js-video-modal" id="video-youtube">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--video-youtube modal--mobile-overlay">
        <div class="modal__inner">
            <button class="modal__close js-modal-close-button">
        <svg class="icon icon--close">
  <use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>

      </button>
            <div class="modal__video">
                <div class="js-modal-video" data-video-id="z3WD_RNxsKY"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal js-video-modal" id="{{id}}">
  <div class="modal-overlay js-modal-overlay"></div>
  <div class="modal modal--{{id}} modal--mobile-overlay">
    <div class="modal__inner">
      <button class="modal__close js-modal-close-button">
        {{render '@icons--close'}}
      </button>
      <div class="modal__video">
        <div class="js-modal-video"{{#if youtubeId}} data-video-id="{{youtubeId}}"{{/if}}></div>
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "video-youtube",
  "youtubeId": "z3WD_RNxsKY"
}
  • Content:
    .modal--video-youtube {
      width: 100%;
    
      .modal__inner {
        max-width: 900px;
        padding-bottom: 0;
        background-color: $color-black;
      }
    
      .modal__close {
        top: -13px;
        right: -13px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: $color-white;
    
        .icon {
          width: 10px;
          height: 10px;
          margin-top: 3px;
          margin-right: 0;
        }
      }
    }
    
    .modal__video {
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
      overflow: hidden;
    
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
    }
    
  • URL: /components/raw/video-modal/video-modal.scss
  • Filesystem Path: src/components/01-elements/modals/video-modal/video-modal.scss
  • Size: 616 Bytes

There are no notes for this item.