Vebego Component Library

Video: External 

<div class="atm-video">
    <video playsinline autoplay muted loop>
        <source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" 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>
 
{
  "url": "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
  "autoPlay": true,
  "showControls": false,
  "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.