How to insert a movie or video in an HTML certificate

Updated: 08/31/2020 by Reckoner Hope

HTML programming language

You can embed a movie in to an HTML document using the examples below. For compatibility, nosotros 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 considering 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 beneath suggestions work for all browsers. Brand sure the solution you lot decide to employ works with the browsers you want to back up.

Link to pic files

The examples below provide unlike methods to make the video file viewable from the browser window. We as well recommend you lot 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 folio.

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 smashing because information technology saves on bandwidth costs, can back up lots of viewers, and introduces your videos to visitors of the well-nigh Internet site. Below is an example of a video hosted on YouTube and embedded on this site.

HTML lawmaking

The HTML code for all YouTube videos is found through the share link plant on every YouTube video. Once yous'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="moving-picture show" value="https://world wide web.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 exist implemented with a single HTML tag.

HTML code

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

Bones embed tag

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

Example HTML code

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

In this example, you're using the embed element to point to the source of the moving-picture show file yous want to play. This example is a very basic example and will not display any warnings. It will non 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 employ the <embed> tag, you tin as well include a movie file using the <img> tag, as shown in the example below.

Case HTML lawmaking

<img dynsrc="https://www.computerhope.com/problems/floppy2.avi" get-go="fileopen">

Embed tag to play QuickTime movies (.MOV)

Apple QuickTime movie files are another pop type of movie on the Cyberspace. Below is a basic example of how to include these files in your spider 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://world wide web.computerhope.com/issues/ibm-linux.mov" Pluginspage="https://support.apple.com/quicktime" width="320" height="250" CONTROLLER="truthful" LOOP="faux" AUTOPLAY="false" proper noun="IBM Video"></embed>

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

Tip

Yous may want to increase the height of the video file if you cannot run across 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 offset playing the video file subsequently the folio has finished loading.

Blazon attribute for embed tag to specify plug-in

In the embed tag, include the blazon aspect to specify the MIME blazon for the video file. Doing so allows yous to specify the plug-in needed to play the video in a browser.

Example HTML code

<embed src="https://world wide web.computerhope.com/bug/floppy2.avi" type="video/ten-msvideo"></embed>

In the example above, the type attribute is set to video/ten-msvideo, which is the MIME type for AVI 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 folio.