HTML Code for Embedded Video

Embedding video in HTML on web pages greatly improves the user experience of a website. We can set the video to play automatically, loop continuously, and add the controls for the viewer to play, pause, or even adjust the volume. To embedded video in HTML code for your website, you need to follow given below steps.

Step-by-step guide to embedding video in HTML

You can easily embed any videos from youtube or vimeo by using HTML <iframe> or <video> tag. Let’s see how to do it with an example.

Step 1: Choose Your Video

First, you need to choose the video you want to embed on your website. You can even use a video hosted on another website like YouTube or Vimeo, so you can select any video from it.

If you want to embed your own video, you have to use the <video> tag. See below steps how to use it.

Step 2: Create a Video Container

You need to create a HTML container using <div> tag for your video. This container will be the area on your web page where the video will be displayed. You can create the container like:

<div class="video-container">
  <!-- your video code goes here -->
</div>

In this code, the div element creates a container for the video. To give the container a class name using class attribute , which can be used to apply CSS styles to the container later. Here, we set the containter classname to ‘video-container’

Step 3: Add Your Video Code

There are two ways to add video code to your HTML: using the <video> element or using an iframe.

• If you want to embed your own video, then you can use the HTML <video> element.
• If you want to embed any Youtube videos, then you can use the HTML <iframe> element.

Using the video Element

We can embed our video directly by using HTML ‘video’ element.

Syntax:

<div class="video-container">
  <video controls>
    <source src="your-video.mp4" type="video/mp4">
    <source src="your-video.webm" type="video/webm">
    <source src="your-video.ogv" type="video/ogg">
    Your browser does not support the video tag.
  </video>
</div>

• The ‘video’ element creates the video player.
• ‘controls’ attribute enables the controls i.e viewer to play, pause, or adjust the volume.
• ‘source’ elements is used to specify the location and type of the video file. For ex, If you have (.mp4) video format, you should set ‘type’ attribute to ‘video/mp4’.
• The last line of the code provides a fallback message if the browsers don’t support the video element.

Example:

See the Pen
Embedding Video by Wonderdevelop (@wonderdevelop)
on CodePen.

See that above video, it has play, pause, or adjust the volume buttons because we added the ‘controls’ attribute to video element.
Note that : The above video is .mp4 format, so we setted ‘type’ attribute to ‘video/mp4’.

Using the iframe

We can embed any youtube videos on your web page using <iframe>, like:

Syntax:

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/your-video-code" frameborder="0" allowfullscreen></iframe>
</div>

• The iframe element creates a frame within your web page to show the video.
• The ‘src‘ attribute is used to specifies the location of the video.
• The ‘allowfullscreen‘ attribute enables the viewer to expand the video to full screen.

Live Preview:

See the Pen
Embed video using <iframe> by Wonderdevelop (@wonderdevelop)
on CodePen.