How to show video in html element in view?

Hi everyone, I am trying to get a video loaded in my view panel:

import { ItemView, WorkspaceLeaf, normalizePath } from "obsidian";

export const VIEW_TYPE_EXAMPLE = "example-view";

export class ExampleView extends ItemView {
  constructor(leaf: WorkspaceLeaf) {

  getViewType() {

  getDisplayText() {
    return "Example view";

  async onOpen() {
    const container = this.containerEl.children[1];

    // Use Obsidian's API to get the correct file path
    const vault =;
    const videoPath = normalizePath("insect.mp4");
     // Extract the actual file path by removing the "app://" prefix and timestamp-like string

    container.createEl("h4", { text: "Example view" });
    const book = container.createEl("div");

    // Create a video element
    const video = document.createElement("video");
    video.controls = true; = "100%";

    const source = document.createElement("source");
    source.src = videoPath;
    source.type = "video/mp4";

    // Create a div to hold video controls
    const controls = container.createEl("div", { cls: "video-controls" });
    // Add play and pause buttons
    controls.createEl("button", { text: "Play", cls: "play-button" });
    controls.createEl("button", { text: "Pause", cls: "pause-button" });

    // Attach event listeners for play and pause buttons
    const playButton = controls.querySelector(".play-button");
    const pauseButton = controls.querySelector(".pause-button");

    playButton?.addEventListener("click", () => {;

    pauseButton?.addEventListener("click", () => {

    // Append the video element to the container


  async onClose() {
    // Nothing to clean up.

but every time it comes back error like this:


I was trying to use the findResourcePath, but didn’t have any luck. The findFullPath couldn’t be used either. Anyone know how to work with this? Thank you so much!

Oh damn…Somehow I was typing around and I figured out. This is the key part

// Use Obsidian's API to get the correct file path
    const vault =;
    const file = vault.adapter.getResourcePath('insect.mp4');

I don’t really know why…I tried getResourcePath before but didn’t work, somehow this way it works…