Warning
This project is no longer maintained. You can still use it, but there will be no more updates.
This plugin allows you to embed videos on the documentation pages using a simple Markdown syntax.
Install the package with pip:
$ pip install mkdocs-videoEnable the plugin in the mkdocs.yml file:
plugins:
- mkdocs-videoSee how to use MkDocs Plugins
To add a video to the final documentation page, you need to use the Markdown syntax for images with a specific name (hereinafter marker).
See how to use Markdown syntax
Example:
content folder structure
├── content
| ├── ...
│ ├── video.md
│ └── videos
│ └── costa_rica.mp4
└── mkdocs.yml
video.md
# Video example
Lorem ipsum dolor sit amet
<mkdocs-url>/video
You can also use relative paths for videos stored together with your content
The following parameters can be used to change the functionality and appearance of video elements in the final HTML. Keep in mind that the plugin configuration parameters are applied globally to all relevant marked elements. To fine-tune each video element, you can use the Attribute Lists extension.
When using this plugin and the mentioned extension together, the following rules apply (with an illustrative examples):
-
[Let's assume we have this plugin configuration]
# mkdocs.yml markdown_extensions: - attr_list plugins: - mkdocs-video: is_video: True video_muted: True video_controls: True css_style: width: "50%"
-
The plugin attributes are used globally by default
<video style="width:50%" muted="" controls="" alt="type:video"> <source src="video.mp4" type="video/mp4"> </video>
-
The extension attributes will override the corresponding plugin attributes, but the rest will remain by default.
{: style='width: 100%'}
<video style="width: 100%" muted="" controls="" alt="type:video"> <source src="video.mp4" type="video/mp4"> </video>
-
The plugin attributes can be disabled for specific video element by adding
disable-global-configattribute.{: disable-global-config style='width: 100%'}
<video alt="type:video" style="width: 100%"> <source src="video.mp4" type="video/mp4"> </video>
-
The extension attribute
srcwill override video source... Do what you want with this info 🙃.{: src='another-video.mp4'}
<video style="width:50%" muted="" controls="" alt="type:video"> <source src="another-video.mp4" type="video/mp4"> </video>
By default, the string type:video is used as a marker in the Markdown syntax.
You can change this value by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
mark: "custom-marker"Now you can use this marker in the Markdown syntax:
By default, the following CSS styles are used for the <iframe> tag that is inserted into the final page:
position: relative;
width: 100%;
height: 22.172vw;You can change the style by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
css_style:
width: "100%"
height: "22.172vw"
...By default, the <iframe> tag will be used to display the video in the final page, but in some cases you may need to use <video> tag instead. You can use it by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
is_video: True
...This parameter will only work with the
<video>tag (is_video: True)
You can specify the MIME type of the video (default: mp4) resource by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
is_video: True
video_type: ogg
...This parameter will only work with the
<video>tag (is_video: True)
You can specify whether the video should be played automatically (default: False) or not by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
is_video: True
video_autoplay: True
...The operation of this parameter may be affected by browser settings or video provider configuration
This parameter will only work with the
<video>tag (is_video: True)
You can specify whether the video should be looped (default: False) or not by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
is_video: True
video_loop: True
...The operation of this parameter may be affected by browser settings or video provider configuration
This parameter will only work with the
<video>tag (is_video: True)
You can specify whether the video should be muted (default: False) or not by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
is_video: True
video_muted: True
...The operation of this parameter may be affected by browser settings or video provider configuration
This parameter will only work with the
<video>tag (is_video: True)
You can specify whether the video controls should be displayed (default: True) or not by adding the following lines to your mkdocs.yml:
plugins:
- mkdocs-video:
is_video: True
video_controls: False
...The operation of this parameter may be affected by browser settings or video provider configuration
The following list contains some of the popular services, as well as examples of direct and embedded links to their videos.
- YouTube
- Vimeo
- Dailymotion
- Facebook Watch
- Fork it.
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
The MIT License (MIT)
Copyright (c) 2023 Mikalai Lisitsa
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
