This plugin allows you to embed videos on the documentation pages using a simple Markdown syntax.

• Installation
• Usage
• Configuration
  • Marker
  • Style
  • Tag <video>
  • Video type
  • Video autoplay
  • Video loop
  • Video muted
  • Video controls
• Embedding examples

Install the package with pip:

$ pip install mkdocs-video

Enable the plugin in the mkdocs.yml file:

plugins:
    - mkdocs-video

See 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

![type:video](https://www.youtube.com/embed/LXb3EKWsInQ)

<mkdocs-url>/video

You can also use relative paths for videos stored together with your content

![type:video](./videos/costa_rica.mp4)

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):

0. [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%"

1. The plugin attributes are used globally by default

   ![type:video](video.mp4)

   <video style="width:50%" muted="" controls="" alt="type:video">
      <source src="video.mp4" type="video/mp4">
   </video>

2. The extension attributes will override the corresponding plugin attributes, but the rest will remain by default.

   ![type:video](video.mp4){: style='width: 100%'}

   <video style="width: 100%" muted="" controls="" alt="type:video">
      <source src="video.mp4" type="video/mp4">
   </video>

3. The plugin attributes can be disabled for specific video element by adding disable-global-config attribute.

   ![type:video](video.mp4){: disable-global-config style='width: 100%'}

   <video alt="type:video" style="width: 100%">
      <source src="video.mp4" type="video/mp4">
   </video>

4. The extension attribute src will override video source... Do what you want with this info 🙃.

   ![type:video](video.mp4){: 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:

![custom-marker](https://www.youtube.com/embed/LXb3EKWsInQ)

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
  • https://www.youtube.com/watch?v=iSpglxHTJVM
  • https://www.youtube.com/embed/iSpglxHTJVM
• Vimeo
  • https://vimeo.com/224903454
  • https://player.vimeo.com/video/224903454
• Dailymotion
  • https://www.dailymotion.com/video/x7ogfqo
  • https://www.dailymotion.com/embed/video/x7ogfqo
• Facebook Watch
  • https://www.facebook.com/gamechangersmovie/videos/343098689705587
  • https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/gamechangersmovie/videos/343098689705587

1. Fork it.
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. 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.