Vebego Component Library

Video 

<!-- Youtube -->
<div class="atm-video">
    <iframe src="https://www.youtube.com/embed/L6LsRTfQGDo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
</div>


<!-- Vimeo -->
<div class="atm-video">
    <iframe src="https://player.vimeo.com/video/22439234" id="vimeo" width="1920px" height="1080px" frameBorder="0" allow="autoplay; fullscreen" allowFullScreen>
    </iframe>
</div>


<!-- External -->
<div class="atm-video">
    <video playsinline controls>
        <source src="https://www.youtube.com/embed/xpz9XVReI1Y" type="video/mp4">
    </video>
</div>


<div class="atm-video">
        {{#if youtube}}
            <iframe src="{{youtube/url}}"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
             {{else if vimeo}}
            <iframe
                src="{{vimeo/url}}"
                id="vimeo"
                width="1920px"
                height="1080px"
                frameBorder="0"
                allow="autoplay; fullscreen"
                allowFullScreen>
            </iframe>
            {{else}}
            <video playsinline {{#if autoPlay}}autoplay muted loop{{/if}} {{#if showControls}}controls{{/if}}>
                <source src="{{url}}" type="video/mp4">
            </video>
            {{/if}}
    </div>
 
/* Youtube */
{
  "url": "https://www.youtube.com/embed/xpz9XVReI1Y",
  "autoPlay": false,
  "showControls": true,
  "youtube": {
    "url": "https://www.youtube.com/embed/L6LsRTfQGDo"
  },
  "vimeo": false
}


/* Vimeo */
{
  "url": "https://www.youtube.com/embed/xpz9XVReI1Y",
  "autoPlay": false,
  "showControls": true,
  "youtube": false,
  "vimeo": {
    "url": "https://player.vimeo.com/video/22439234"
  }
}


/* External */
{
  "url": "https://www.youtube.com/embed/xpz9XVReI1Y",
  "autoPlay": false,
  "showControls": true,
  "youtube": false,
  "vimeo": false
}
  • Content: 
    .atm-video
{
    @apply relative;
    padding-bottom: 56.25%;

    > iframe,
    > video
    {
        @apply absolute w-full h-full;
    }
}
  • URL: /components/raw/video/video.css
  • Filesystem Path: src\components\02-atoms\video\video.css
  • Size: 151 Bytes

No notes defined.