W3docs
en
Log in

How to Insert Video in HTML

See how to use <video> and <iframe> tags instead of the <embed>, <frame> and <object> tags. Learn how to set video autoplay. Practice with examples.

Tags

There are several ways of inserting a video in your website. The <embed>, <frame> and <object> tags were being used for inserting videos into an HTML document. But they are legacy now, so let's have a look to understand how to use the <video> and <iframe> tags.

Use the <video> tag for inserting videos in HTML

The <video> tag is added in HTML5 along with its sibling, <audio>. Before the release of HTML5, a video could only be played in a browser with a plug-in (like a flash). The HTML5 <video> element specifies a standard way to embed a video in a web page. That is to say that the video source is specified using the <source> element inside the <video> tag. One can use it to embed videos imported from the computer or hosted by an external website.

For the basic use, all we need to do in an HTML document is to add the video URL to the element by using the <source> element to identify the video URL and to add the <span class="attribute">controls</span> attribute so that website visitors can control video options. It is also important to use the <span class="attribute">width</span> and <span class="attribute">height</span> attributes to set the size of the video. Let’s see a simple example.

Example of inserting a video in HTML:

Example of inserting a video in HTML with the <video> tag | HTML | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <video controls height="240" width="300"> <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4"> </video> </div> At a minimum, to use the <video> element, the following attributes need to be used:

  • <span class="attribute">controls</span>, which must be specified on the <video> tag so that a visual element appears to control playback,
  • <span class="attribute">src</span> and <span class="attribute">type</span>, which define the URL and format of the video file inside a <span class="attribute"> XFI4 </span> child element.

Moreover, there are several optional attributes which can be used to influence the way video content is loaded. These attributes include:

  • <span class="attribute">autoplay</span>, which specifies that the video will start playing as soon as it is ready,
  • <span class="attribute">loop</span>, which specifies that the video will start over again every time it is finished,
  • <span class="attribute">poster</span>, which selects an image to display as the poster for the video until playback begins,
  • <span class="attribute">preload</span>, which tells how the author thinks the video should be loaded when the page loads.
Tip

Another critical point to remember is that all modern browsers support the <video> element.

Currently, the HTML5 <video> tag supports 3 types of video files:

FormatMIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

How to set video autoplay

To set autoplay for the video you just need to add the <span class="attribute">autoplay</span> attribute for the <video> tag like this:

How to Insert Video in HTML

<video width="320" height="240" autoplay muted>
Tip

Add the controls attribute alongside autoplay if you want users to be able to pause or adjust the volume. Note that modern browsers often require the muted attribute for autoplay to work reliably.

Example of setting video autoplay:

Example of setting video autoplay | HTML | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay muted>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p><strong>Note:</strong> The autoplay attribute will not work on some mobile devices.</p>
  </body>
</html>
Try it Yourself »

Insert videos from Youtube using the <iframe> tag

The easiest way to play videos in HTML, is using YouTube as a source. First, you need to upload the video to YouTube or copy the embed code of an existing video, which will be inserted in the <iframe> element in your web page.

To have the embed link of the YouTube video, follow these simple steps:

  1. Open the video on YouTube and click the share button.
  2. Open the Embed code.
  3. Copy the Source link.

As you copy the embed link you can insert it into your HTML document as the <span class="attribute">src</span> of your <iframe> element. Also, define the <span class="attribute">width</span> and <span class="attribute">height</span> for your video. Now, let’s see how it will look like.

Example of inserting a video from Youtube using the <iframe> tag:

Insert Videos from Youtube Using the <iframe> Tag | Example of Inserting Videos from Youtube Using the <iframe> Tag | HTML | W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Steve Jobs - How to Live before You Die</h2>
    <p>At his Stanford University commencement speech, Steve Jobs, CEO and co-founder of Apple and Pixar, urges us to pursue our dreams and see the opportunities in life's setbacks - including death itself.</p>
    <iframe width="500" height="320" src="https://www.youtube.com/embed/lcZDWo6hiuI">
    </iframe>
  </body>
</html>
Try it Yourself »