Welcome!

• Getting Started
  • Configuration
  • Editor
  • Quick Start
• Project Structure
  • Template
  • Table of Contents (TOC)
  • Content
• Markdown
  • Introduction to Markdown
  • Basics
  • Lists
  • Links
  • Images
  • Code
  • Tables
  • Equations
  • Videos
  • Embedded
• Languages
  • Introduction to Languages
  • Narrators
  • Emotions
  • Premium Narrators
  • Translations
• Styling
  • Introduction to Styles
  • Custom Theme
• Advanced
  • Framed Narrations
  • Snippets
• Demos
  • Create Full Course

Embedding Videos in Markdown with Lupo

While Markdown is a powerful tool for creating content, it doesn't support embedding videos directly. However, with our new tool Lupo, we have a solution that allows you to incorporate videos into your markdown content. By using our cognitive services and background directive, we can take your video and place it as a background for your slides. In this section, we will show you how to use Lupo to create video backgrounds for your markdown content. So, even though Marp and Marpit do not support videos in markdown, we have you covered with our innovative solution. Let's explore how to do it!

External Video

The <video> tag is an HTML5 element used to embed videos into a webpage. The src attribute specifies the URL or local path of the video file to be played. Also, you can include the standard controls in markdown preview for playing and pausing the video by adding the controls attribute. The muted attribute will play the video without sound (no-muted keeps the sound). Additionally, you can customize video behavior result with attributes such as:

• video-duration to match the complete video length to the video duration.
• audio-duration to match the video length to the audio duration.
• repeat to make the video repeat continuously until the audio finishes.

Syntax

<video src="url or path" audio-duration muted>Your device does not support video playback.</video>

For example:

---
marp: true
theme: customtheme
---

<video src="../universe.mp4" controls class="w-100" audio-duration>Your device does not support video playback.</video>

<!-- 
Welcome to our universe, a vast and wondrous place full of mysteries and surprises.

[[cheerful]] In this video, we will share with you some fun facts about the universe that will blow your mind. So, sit back, relax, and enjoy the show!
-->

Adding Narrations to Videos with Lupo

When creating a video with Lupo, it's important to know that you can place narrations at specific times during the video. This can be achieved by adding parentheses to your narration text, followed by the time in seconds, minutes and seconds, or hours, minutes and seconds, depending on where you want the narration to occur. This way, you can ensure that your narration lines up with the corresponding visual elements on the screen, and create a more cohesive and engaging video experience for your audience.

Audio notes can be located at some specific time within the external videos. You can specify the time using only seconds, minutes and seconds or complete time.

Please ensure that each narration is provided in a single line without line breaks. Use the specified format for the time representation within double parentheses.

*Note: Microseconds are not allowed in the time specification.

((seconds))

((minutes, seconds))

((hours, minutes, seconds))

((1)) Narration at second 1

((1:3)) Narration at 1:03

((1:2:3)) Narration at 1:02:03

For example:

---
marp: true
theme: customtheme
---

<video src="../universe.mp4" controls>Your device does not support video playback.</video>

<!-- 
((5)) Welcome to our universe, a vast and wondrous place full of mysteries and surprises.

((12)) [[cheerful]] In this video, we will share with you some fun facts about the universe that will blow your mind. So, sit back, relax, and enjoy the show!
-->