ResiLien/portails
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add video shortcode

Browse Source
This commit is contained in:
Henk Verlinde
2021-04-20 20:05:47 +02:00
parent 7a7a2f46b0
commit 51fdde560f
4 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
content/blog/say-hello-to-doks/index.md
View File

@ -9,3 +9,39 @@ weight: 50
images: ["say-hello-to-doks.png"]
contributors: ["Henk Verlinde"]
---
## Video shortcode
### Usage
```md
{{</* video ratio="16x9" attributes="controls autoplay muted" webm-src="videos/flower.webm" mp4-src="videos/flower.mp4" */>}}
```
| Parameters | Values |
|----------|-------------|------|
| ratio | <1x1 \| 4x3 \| 16x9 \| 21x9> |
| attributes | [[Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes)] |
| webm-src | [path/to/file.webm] |
| mp4-src | [path/to/file.mp4] |
{.table-striped}
### Renders
```html
<div class="ratio ratio-16x9">
<video controls autoplay muted>
<source src="/videos/flower.webm" type="video/webm">
<source src="/videos/flower.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
```
{{< video ratio="16x9" attributes="controls autoplay muted" webm-src="videos/flower.webm" mp4-src="/videos/flower.mp4" >}}
## Resources
- [\<video\>: The Video Embed element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
- [Ratios](https://getbootstrap.com/docs/5.0/helpers/ratio/)
- [Custom aspect ratios](https://getbootstrap.com/docs/5.0/helpers/ratio/#sass-map)