Video Embed Component

Component Details

Responsive video embed used for youtube or vimeo videos.


        <div class="c-video-embed">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/HENQesrqBh4?si=iQdtol2JsNrRbEdo&amp;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>


        .c-video-embed {
          max-width: 100%;
          height: auto;
          padding-bottom: 56.25%;
          position: relative;
          overflow: hidden;
        }
        
        .c-video-embed iframe,
        .c-video-embed object, 
        .c-video-embed embed {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }


        .c-video-embed {
          max-width: 100%;
          height: auto;  
          padding-bottom: 56.25%;
          position: relative;
          overflow: hidden;  
          
          iframe,
          object,
          embed {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;    
          }
        }