UCI

ucipt-Responsive vimeo video: Default 

<div class="ucipt-responsive-vimeo-video">
    <div class="vimeo-div" style="position:relative;">
        <iframe class="ucipt-responsive-vimeo-video__iframe optanon-category-4" src="https://player.vimeo.com/video/647220225?h&#x3D;794dc942c0?background=1&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
    </div>
    <script src="https://player.vimeo.com/api/player.js" class="optanon-category-4"></script>
    <img class="vimeo-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-vimeo-video">
    {{#if vimeo-video-code}}
        <div class="vimeo-div" style="position:relative;">
            <iframe class="ucipt-responsive-vimeo-video__iframe optanon-category-4" src="https://player.vimeo.com/video/{{vimeo-video-code}}?background=1&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
        </div>
        <script src="https://player.vimeo.com/api/player.js" class="optanon-category-4"></script>
        <img class="vimeo-bg-image" src="{{vimeo-video-bg.url}}" alt="{{vimeo-video-bg.alt}}">
    {{/if}}
</div>
 
{
  "vimeo-video-code": "647220225?h=794dc942c0",
  "vimeo-video-bg": {
    "alt": "Dummy Text",
    "url": "https://i.vimeocdn.com/video/1292042761-1987817c461351bdfc9ecb1fcbd7c0e14cf27b8039742ee21?mw=2300&mh=1105"
  }
}
  • Content: 
    .ucipt-responsive-vimeo-video {
    width: 100%;
    height: /*527px*/524px;
    left: 0;
    top: 0;
    overflow: hidden;

    @media (--viewport-ms-min) {
        .vimeo-div{padding-top:47.9%;}
    }
    @media (--viewport-ms-max) {
        .vimeo-div{display:none;}
    }

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

No notes defined.