How to Insert Video in HTML

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 deprecated 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 is identified by adding a video URL to a source attribute. 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 controls attribute so that website visitors can control video options. It is also important to use the width and height attributes to set the size of the video. Let’s see a simple example.

Example of inserting a video in HTML:

<!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>

Result

At a minimum, to use the <video> element, the following attributes need to be used:

  • src, which defines the URL where the video content is hosted,
  • type, which defines the format of the file,
  • controls, which must be specified or no visual element will appear to control playback of the content.

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

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

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:

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

How to set video autoplay

To set autoplay for the video you just need to add the autoplay attribute for the <video> tag like this:

<video width="320" height="240" autoplay>
Set autoplay controls in the case you want to enable having “controls” option for the autoplay video.

Example of setting video autoplay:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <video width="320" height="240" controls autoplay>
      <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>

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 src of your <iframe> element. Also, define the width and height for your video. Now, let’s see how it will look like.

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

<!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>