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
index.html
<html>
<head>
<title>Video in HTML</title>
</head>
<body>
<video src="video.mp4"></video>
</body>
</html>
Steps we are going to Talk about in this Tutorial:
Step 1. Open Notepad.
Step 2. Create HTML file.
Step 3. Insert Video using HTML Video Tags.
Step 4. Save and Run the HTML File.
Step 5. Enjoy your Video on HTML Webpage.
How to Insert Video files from Local Storage
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.
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
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. Declare HTML Video Tag
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
<video></video>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"></video>( Important: So if your Video file and the HTML file is Present on the same Location. Then you just have to give your Video file's name, followed by the File Extension here.)
Step 4: Add Controls Attribute:
By Video tag and SRC Attribute, We have Provided Enough Data so Browser can Insert our Video File in our HTML Webpage. But there isn't anything so we can Play or Activate the Video file the Browser. For that, We have to use this Control Attribute Inside the HTML Video Tags.
index.html
<html>
<head>
<title>Video in HTML</title>
</head>
<body>
<video src="video.mp4" controls></video>
</body>
</html>Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Final Step: Save and Run the HTML file on the Browser
Our Video File Should be There.
But 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.
How to insert audio in html using notepad
index.html
<html>
<head>
<title>Audio in HTML</title>
</head>
<body>
<audio src="audio.mp3"></audio>
</body>
</html>Steps for Inserting Audio in HTML using Notepad:
Step 1. Open Notepad.
Step 2. Create HTML file.
Step 3. Insert Audio using HTML Audio Tags.
Step 4. Save and Run the HTML File.
Step 5. Enjoy your Audio on HTML Webpage.
How to Insert Audio files from Local Storage
To Insert Audio Files in HTML from Local Storage We will Need these 3 Things.
A Audio 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.
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
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>
My First HTML Page
</body>
</html>Step 2. Declare HTML Audio Tag
As we all know, that in HTML we have to use Tags, to Include HTML Elements, like Audio, Video, Images ETC. To insert Audio files inside the HTML Document we have the "Audio Tags" for that.
index.html
<audio></audio>Step 3. Assing Audio File's Path
Using Audio tags in HTML Document we have Declared an Audio Element inside our HTML Webpage. We have to Specify our Audio File's Path, Inside the HTML Audio Tags so Our Browser can get the Audio File, and Insert that Audio File inside our HTML Webpage.
To assign Audio File's Path
Select the Audio Starting tag,
After the tag name,
we have to Give our Audio file's Location inside this SRC attribute.
index.html
<audio src="audio.mp3"></audio>(Important: So if your Audio file and the HTML file is Present on the same Location. Then you just have to give your Audio file's name, followed by the File Extension here.)
Step 4: Add Controls Attribute:
By Video tag and SRC Attribute, We have Provided Enough Data so Browser can Insert our Audio File in our HTML Webpage. But there isn't anything so we can Play or Activate the Audio file the Browser. For that, We have to use this Control Attribute Inside the HTML Audio Tags.
index.html
<html>
<head>
<title>Audio in HTML</title>
</head>
<body>
<audio src="audio.mp3"></audio>
</body>
</html>Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
Final Step: Save and Run the HTML file on the Browser
Our Audio File Should be There.
fol But if your Audio file isn't there, Then make sure that Your Audio File and Your HTML File is Present at the Same Folder. Or if your HTML file and the Audio File is present at two different locations like this.
or you are Facing This Error Inside the Console Tab.
then we have to give the full path of our Audio File.
Because Browser isn't able to Detect our Audio 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 Audio file.}
Now Paste here the Copied Path.
Now Refresh the Browser.
That's it For Inserting Audio files from Local Storage.
FAQ about How to add Video in HTML using Notepad
How to insert video in html from folder
If your Video file is present at Different Location inside a Folder, Then you need to Prove 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 (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>Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
How to put YouTube video in notepad
You can not Put or play YouTube video inside Notepad Text Editor. What you can do is Add or Embed YouTube inside your HRML Webpage using Notepad Text Editor.
To embed YouTube video in html using Notepad Text Editor. 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 (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 YouTube 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>On This Page
Need a Personal Tutor?
I am here to help you with your Programming journey. HTML, CSS, JavaScript, ReactJS, NextJS, C, C++, C#, SQL and more.
