https://github.com/stuymedova/kirbytext-video-plugin
Kirby CMS Plugin to set the width of each (video: …) to 100%
https://github.com/stuymedova/kirbytext-video-plugin
kirby kirby-cms kirby-plugin kirby3 kirby3-cms kirby3-plugin
Last synced: about 2 months ago
JSON representation
Kirby CMS Plugin to set the width of each (video: …) to 100%
- Host: GitHub
- URL: https://github.com/stuymedova/kirbytext-video-plugin
- Owner: stuymedova
- License: mit
- Created: 2020-09-01T00:25:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-13T17:57:03.000Z (almost 4 years ago)
- Last Synced: 2025-01-09T17:04:45.078Z (4 months ago)
- Topics: kirby, kirby-cms, kirby-plugin, kirby3, kirby3-cms, kirby3-plugin
- Language: PHP
- Homepage: https://getkirby.com
- Size: 7.81 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Kirbytext Video Plugin
Sets the width of each video added with a [`(video: …)`](https://getkirby.com/docs/reference/text/kirbytags/video) tag to 100% while maintaining the height.
Overrides the default `(video: …)` KirbyTag located in `kirby/config/tags.php`. More info on overriding the default tags: [getkirby.com/docs/reference/plugins/extensions/kirbytags#overriding-default-kirbytags](https://getkirby.com/docs/reference/plugins/extensions/kirbytags#overriding-default-kirbytags).
## Output
```html
Caption goes here.
```
## Setup
1. Download and copy this repository to `/site/plugins`
2. Add the following CSS to the project:
```css
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 ratio */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```