UCI

ucipt-Responsive bg video: Bottom Align 

<div class="ucipt-responsive-bg-video">
    <video class="ucipt-responsive-bg-video__video bottom" src="https://static.videezy.com/system/resources/previews/000/043/142/original/3prts-2.mp4" muted autoplay loop></video>
    <img class="video-bg-image" src="https://i.vimeocdn.com/video/1292042761-1987817c461351bdfc9ecb1fcbd7c0e14cf27b8039742ee21?mw&#x3D;2300&amp;mh&#x3D;1105" alt="Dummy Text">
</div>
 
<div class="ucipt-responsive-bg-video">
<video class="ucipt-responsive-bg-video__video {{#if topalign}}top{{/if}}{{#if bottomalign}}bottom{{/if}}" src="{{bg-video-url}}" muted autoplay loop></video>
<img class="video-bg-image" src="{{video-bg.url}}" alt="{{video-bg.alt}}">
</div>
 
{
  "bg-video-url": "https://static.videezy.com/system/resources/previews/000/043/142/original/3prts-2.mp4",
  "video-bg": {
    "alt": "Dummy Text",
    "url": "https://i.vimeocdn.com/video/1292042761-1987817c461351bdfc9ecb1fcbd7c0e14cf27b8039742ee21?mw=2300&mh=1105"
  },
  "bottomalign": true
}
  • Content: 
    .ucipt-responsive-bg-video {
    width: 100%;
    height: /*527px*/524px;
    left: 0;
    top: 0;
    overflow: hidden;

    &__video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        @media (--viewport-ms-max) {
            display:none;
        }
        &.top{object-position: top;}
        &.bottom{object-position:bottom;}
    }
    .video-bg-image{
        display:none;
        @media (--viewport-ms-max) {
            display:block;
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
  • URL: /components/raw/ucipt-responsive-bg-video/ucipt-responsive-bg-video.css
  • Filesystem Path: src/01-atoms/ucipt-responsive-bg-video/ucipt-responsive-bg-video.css
  • Size: 632 Bytes

No notes defined.