How to insert a movie or video in an HTML document

Updated: 08/31/2020 by Computer Hope
HTML programming language

You can embed a movie in to an HTML (hypertext markup language) document using the examples below. For compatibility, we recommend you use the MP4 video format, which is supported by all major browsers and operating systems.

Tip

Hosting movies on your server can be expensive because of bandwidth costs. An alternative is to host the video on YouTube and embed the YouTube video link on your web page.

Note

Not all of the below suggestions work for all browsers. Make sure the solution you decide to use works with the browsers you want to support.

Link to movie files

The examples below provide different methods to make the video file viewable from the browser window. We also recommend you create a direct download link to the file, which allows visitors to download the file if the movie won't play in the browser. Below are two examples of direct links for the two video files in this page.

Floppy drive robot

HTML code

<a href="https://www.computerhope.com/issues/floppy2.avi">Floppy drive robot</a>

IBM Linux commercial

HTML code

<a href="https://www.computerhope.com/issues/ibm-linux.mov">IBM Linux commercial</a>

Embed a YouTube video

Hosting videos on YouTube is great because it saves on bandwidth costs, can support unlimited viewers, and introduces your videos to visitors of the most Internet site. Below is an example of a video hosted on YouTube and embedded on this site.

HTML code

The HTML code for all YouTube videos is found through the share link found on every YouTube video. Once you've clicked the Share link, click the Embed link. Below is an example of the code used to display the above YouTube video.

<object height="350" width="425">
<param name="movie" value="https://www.youtube.com/v/R3ymHMgFAps">
<param name="wmode" value="transparent">
<embed height="350" src="https://www.youtube.com/v/R3ymHMgFAps?rel=0" type="application/x-shockwave-flash" width="425" wmode="transparent"> </object>

Video tag

The <video> tag is an HTML tag designed to display videos in all modern browsers. The tag supports MP4, Ogg, and WebM video formats and can be implemented with a single HTML tag.

HTML code

<video controls>Your browser does not support the &lt;video&gt; tag.
<source src="/jargon/m/computer-hope.mp4"/>
</video>

Basic embed tag

Below is code for the most basic method of embedding a file into a web page.

Example HTML code

<embed src="https://www.computerhope.com/issues/floppy2.avi"></embed>

In this example, you're using the embed element to point to the source of the movie file you want to play. This example is a basic example and will not display any warnings. It does not point the user to a location to download a plug-in if the video file is not supported.

Add movie file using the img tag

If you don't want to use the <embed> tag, include a movie file using the <img> tag, as shown in the example below.

Example HTML code

<img dynsrc="https://www.computerhope.com/issues/floppy2.avi" start="fileopen">

Embed tag to play QuickTime movies (.MOV)

Apple QuickTime movie files are another popular type of movie on the Internet. Below is a basic example of how to include these files in your web page.

Note

QuickTime is no longer supported on Microsoft Windows and all new browsers no longer support this method of embedding QuickTime movies.

Example HTML code

<embed src="https://www.computerhope.com/issues/ibm-linux.mov" Pluginspage="https://support.apple.com/quicktime" width="320" height="250" CONTROLLER="true" LOOP="false" AUTOPLAY="false" name="IBM Video"></embed>

In the embed example, the first portion of the code points to the src (source) of the movie file, which is the movie file itself. Next, the pluginspage is the location of the plug-in if the visitor does not have it installed. The width and height are the actual dimensions of the video file. The Controller value can be set to true or false to toggle the displaying of the bottom controls.

Tip

You may want to increase the height of the video file if you cannot see the controller.

Loop is a setting for when you want the file to automatically start over when finished. Finally, autoplay tells the browser to start or not to start playing the video file after the page has finished loading.

Type attribute for embed tag to specify plug-in

In the embed tag, include the type attribute to specify the MIME (multipurpose Internet mail extensions) type for the video file. Doing so lets you specify the plug-in needed to play the video in a browser.

Example HTML code

<embed src="https://www.computerhope.com/issues/floppy2.avi" type="video/x-msvideo"></embed>

In the example above, the type attribute is set to video/x-msvideo, which is the MIME type for AVI (Audio Video Interleave) video files.

To determine the value to assign to the type attribute for other types of video files, check the list of MIME types for video files on the IANA Media Types page.