Skip to main content

Type of Image & Video we can apply in docusaurus

  1. Image from local folder
  2. Image from url
  3. Video from local folder
  4. Video from url

Image from local folder using markdown format​

The code format like below

![local image](/img/image.png)

Example

local image

Image from local folder with widht and height​

<img
  src="/img/image.png"
  alt="local image"
  style={{ width: "100%", maxWidth: "400px" }}
/>

Example

local image

Image from external URL​

The code format like below

![external image](https://external-url.com/image.png)

Example

external url

Image from external URL with width and height​

<img
  src="https://external-url.com/image.png"
  alt="external image"
  style={{ width: "100%", maxWidth: "400px" }}
/>

Example

external image

Video from internal local vps folder​

For local videos, it is recommended to use the HTML <video> tag for better control and compatibility.

The code format like below

<video controls width="100%">
  <source src="/img/video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Example

Video from YouTube/External URL​

For external videos like YouTube, use an <iframe>.

The code format like below

<iframe 
  width="100%" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  frameborder="0" 
  allowfullscreen>
</iframe>

Example