How to add Video in Html

To embed a video in an HTML document, we need to adhere to the following guidelines. By following these instructions, we can effectively display a video on a webpage.

To begin, the initial step involves inputting the HTML code into a text editor or accessing the current HTML file in the text editor where the video is intended to be inserted.

Example


<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add a video
</Title>
</Head>
<Body>
Hello World! <br>
Hello User! <br> 
</Body>
</Html>

Step 2: Next, position the cursor at the desired location for inserting a video. Subsequently, enter the <video> placeholder at that precise point. Following this action, it is necessary to employ the source tag within the opening and closing tags of the video element.

Example


<Body>
Hello World! <br>
Hello User! <br> 
<video>
<source>
</video>
</Body>

Step 3: In this step, we need to include the attribute "src" in the source tag. Simply enter the "src" attribute within the <source> tag alongside the type attribute.

Example


<source src="" type="">

Step 4: Next, we need to specify the location of the video we wish to include. Enter the video's path in the src attribute. If the video is located in the same folder as the HTML file, provide the following path:

Example


<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> <br>

If the video is saved in a different location, please enter the accurate file path to enable the browser to access the video smoothly, as detailed in the subsequent section.

Example


<source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">

In the next step, we can specify the dimensions of the video by utilizing a pair of distinct attributes, as illustrated in the code snippet below:

Example


<video width="pixel" height="pixel">

Step 6: Finally, the next step is to save the HTML file or HTML code in the text editor before proceeding to run the file.

Example


<!Doctype Html>
<Html>   
<Head>    
<Title>   
Add a video
</Title>
</Head>
<Body>
Hello World! <br>
<video width="320" height="240" controls autoplay>
<source src="https://placehold.co/400x300/9b59b6/ffffff?text=Sample+Image" type="video/mp4">
</video>
Hello User! <br> 
</Body>
</Html>

Input Required