<!-- 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
}
.atm-video
{
@apply relative;
padding-bottom: 56.25%;
> iframe,
> video
{
@apply absolute w-full h-full;
}
}
No notes defined.