<template
is="ui-video"
title="string"
info="string"
url="string"
poster="string"
caption="string"
>
<div class="ui-video">
<div class="ui-video-content">
<div if="props.title" class="ui-video-title">{{props.title |> esc}}</div>
<div if="props.info" class="ui-video-info">{{props.info}}</div>
<div class="ui-video-container">
<div
class="ui-video-youtube"
if="/youtube\.com|youtu\.be/.test(props.url)"
>
<iframe
src="{{props.url.replace('watch?v=','embed/')}}"
frameborder="0"
allowfullscreen
>
</iframe>
</div>
<div class="ui-video-vimeo" elsif="/vimeo\.com/.test(props.url)">
<iframe
src="{{props.url.replace('vimeo.com','player.vimeo.com/video')}}"
frameborder="0"
allowfullscreen
>
</iframe>
</div>
<div class="ui-video-native" elsif="props.url">
<video controls preload="metadata" poster="{{props.poster || ''}}">
<source
if="/\.mp4$/i.test(props.url)"
src="{{props.url}}"
type="video/mp4"
/>
<source
if="/\.ogg$/i.test(props.url)"
src="{{props.url}}"
type="video/ogg"
/>
<source
if="/\.webm$/i.test(props.url)"
src="{{props.url}}"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</div>
</div>
<div if="props.caption" class="ui-video-caption">
{{props.caption |> esc}}
</div>
</div>
</div>
</template>
