Logo - ProgrammingHead

How to Insert Video in HTML using Notepad | Notepad++

Hello, guys Welcome. In this tutorial, we are going Know How to Insert Video in HTML using Notepad | Notepad++ Text Editor.
We are going to Discuss only two Methods Here.
But before that, Here we have written Basic HTML CODE for Inserting / Adding Video in HTML Document.

How to Insert Video in HTML using Notepad | Notepad++

index.html

<video src="video.mp4"></video>

How to Insert Video files in Notepad

To Insert Video Files in HTML from Local Storage We will Need these 3 Things.

A Video File
Which we are going to Insert Inside Our HTML Webpage
A Text Editor Like Notepad/Notepad++
By using That we are going to Create, Write and Save our HTML Code.
Last One is A Browser
To Run The HTML Webpage

So get started with the HTML Syntax.

Step 1. Open Notepad and Start Writing HTML Syntax

HTML Syntax Starts with HTML Tags and Includes some Other Tags Like,
<head> Tag
<title> Tag
<body> Tag

index.html

<html>
  <head>
    <title></title>
  </head>    
  <body></body>    
</html>

Step 2. Use HTML Video Tags

As we all know, that in HTML we have to use Tags, to Include HTML Elements, like Video, Video, Images ETC. To insert Video files inside the HTML Document we have the <video> Tags for that.

index.html

<html>
  <head>
    <title></title>
  </head>    
  <body>

    <video src="videoPathHere" controls></video>

  </body>    
</html>

Step 3. Assing Video File's Path

Using Video tags in HTML Document we have Declared an Video Element inside our HTML Webpage. We have to Specify our Video File's Path, Inside the HTML Video Tags so Our Browser can get the Video File, and Insert that Video File inside our HTML Webpage.
To assign Video File's Path
Select the Video Starting tag,
After the tag name,
we have to Give our Video file's Location inside this SRC attribute.

index.html

<video src="video.mp4" controls></video>

Final Step: Save and Run the HTML file on the Browser

Now, only thing you have to do is, Save the File and Run it inside a WebBrowser.

if your Video file isn't there, Then make sure that Your Video File and Your HTML File is Present at the Same Folder. Or if your HTML file and the Video File is present at two different locations or you are Facing This Error (Failed to load resource: net::ERR_FILE_NOT_FOUND) Inside the Console Tab. then we have to give the full path of our Video File.
Because Browser isn't able to Detect our Video File in the Parent Location.

{To get the full path of any file, we have to Right-click on that file. Select Properties
and under the Security tab
you can copy the full path of your Video file.}

Now Paste here the Copied Path.
Now Refresh the Browser.
That's it For Inserting Video files from Local Storage.

Related Topics: How to Insert Video in HTML using Notepad | Notepad++

Click on Titles below to reveal the Data

How to insert video in html from folder

If your Video file is present at Different Locations like one inside a Folder one outside, Then you need to Provide the Correct path of your Video File.
In my case, my Video file is Present inside a folder Called Videos. So I will provide my Video file path using Folder name and my Video files name followed by Video file's Extension.
myFolder/video.mp4

index.html

<html>
  <head>
    <title>Video in HTML</title>
  </head>    
  <body> 
    
    <video src="myFolder/video.mp4"></video>
    
  </body>    
</html>

Embed youtube video in html

To embed YouTube video in html. We need to open YouTube and Select a Video that we want to Embed in our HTML Webpage. After selecting a Video, You need to search/look for Share Button (usually Found right After the Like and Dislike Buttons in PC version).
Click the Share button,
Right after that a Small popup Window appear on your Screen. Select the First Embed Option and YouTube will provide you a Embed code to Embed that YouTube video in your Webpage.

Copy that code and Paste it on your HTML Document. DONE :).

index.html

<html>
  <head>
    <title>Embed YT Video</title>
  </head>
  <body>

   <iframe width="560" height="315" src="https://www.youtube.com/embed/rukiS1Q1-xU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  </body>
    
</html>