Insert Video Tag in HTML

Insert Video Tag in HTML? Control, Autoplay & Loop in Video tag HTML

Insert Video Tag in HTML? Control, Autoplay & Loop in Video tag HTML

Add/Insert Video in HTML | HTML Tag For Add Video in WebPage
Add/Insert Video in HTML | HTML Tag For Add Video in WebPage

 

Introduction Video Tag In HTML

In this blog, we are going to learn about Add Video to your webpage using HTML and styling it using CSS.

There are many media types such as audio, image, and video that give more specifications and details to a website. Today we are going to see how a video media type is added to a website and how it can be customized using various attributes and how it can be styled using various CSS attributes too.

<video> tag is used to embed video content to your webpage, it was introduced in HTML5. Before <video> tag was introduced <embed> tag was used to insert audio or video files to your webpage but <video> tag has made it simple and saved the effort.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

It is a Start and Ends tag and so the content and attributes for uploading a video will be placed between the opening and ending tag

Add/Insert Video in HTML

Code Of Video Tag in HTML :

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

Attributes used for the video tag: HTML video controls

  • Src: Specifies the URL of the video
  • Control: You can add control options like play, pause, and volume adjustments by using the control attribute.
  • Autoplay: you can make the video play without waiting for the user to press the play button. When the video is loaded and ready, it will automatically start paying.
  • Loop: you can make the video play again and again after ending by using this attribute.
  • Width: You can adjust the width of the video and decide how much area the video is going to cover horizontally.
  • Height: you can adjust the height of the video and decide how much area the video is going to cover vertically.
  • Muted: you can mute the audio accompanying the video by using this attribute.

10+ Javascript Projects For Beginners With Source Code

Example Of Video Tag Add in HTML :

<video height=”500” width=”500” controls>
  <source src=”movie.mp4” type=”video/Mp4”>
  <progress id=”progress” min=”10”<</progress>
</video>

Example Video Output:

Insert Video Tag in HTML? Control, Autoplay & Loop in Video tag HTML

 

It supports video formats such as MP4, WebM, and OGG.

As video tag was introduced in HTML5, therefore, various latest browser versions such as Chrome 4.0, Edge 9.0, Firefox 3.5, Safari 3.1, and Opera 11.5 supports video-tag

Styling Video tag using CSS

You can style the way you control buttons look, you can style and control the margin, background-color, Color, and also other components using CSS to your video tag.

5+ HTML CSS Projects With Source Code

You can style different components of a video tag such as you can style the progress bar such as:

Progress {
  width: 40px;
  height:40px;
  border: dotted;
  color: #6493f;
}

And many more………

You can also style the control buttons by using the button tag and styling it by using various CSS attributes.

Thanks for reading!

written by @codingporium



Leave a Reply