How to embed a video in HTML

Question

How can a video file, such as an MP4, be added to an HTML document in a project?

Answer

To embed a video file in an HTML document using JetBrains IDEs:

1. Prepare your project structure:

   Place the video file you want to embed into your project's Resources root folder.

   For details on resource folder management, see: Content Roots: Folder Categories.

2. Use the <video> tag to add the video into your HTML file:

   <video width="640" height="360" controls preload="none">
       <source src="yourvideo.mp4" type="video/mp4">
   </video>
   

   Make sure the path to the video is kept in relation to the Resources root folder.

   

See also https://www.jetbrains.com/help/idea/view-images-in-ide.html