HTML - Video

  »   HTML  »   HTML Tutorial - Inserting video into html pages

A video file can be inserted in an HTML page in two ways. The first way would be using the <embed/> tag. This tag does not need an ending/finishing tag. It works, mostly, the same as a tag for a photo.

html<embed src="example.mpeg" autostart="false" height="30" width="144" />

Also, you can insert a video file using a link.

html<a href="example.mpeg" title="Download movie">film name</a>

Supported extensions for the embed tag

These are:

  • .swf - made by Macromedia Flash
  • .wmv - Microsoft Windows Media Video
  • .mov - Quick Time Movie, belongs to Apple
  • .mpeg - created by Moving Pictures Expert Group.

The most used are .mpeg and .swf, because of the compact format.

Attributes of the embed tag

  • autostart - sets whether the file will run automatically after the page is loaded. Can have the true or false value
  • hidden - sets whether the buttons are hidden or not. Can have the true or false value.
  • volume - can have any value from 0 to 100
  • loop- sets whether the file will be replayed after it is finished. Can have the true or false value.
  • playcount - this establishes how many times the file will be replayed. For example playcount="2" means it will be replayed two times and after it will stop.

Inserting a YouTube video using embed tag

You can do that very easy, because YouTube provides you with the HTML code.

html<object width="425" height="344" data="https://www.youtube.com/embed/F9Bo89m2f6g"></object>
html<embed src="https://www.youtube.com/embed/F9Bo89m2f6g" allowfullscreen="true" width="425" height="344">
html<iframe  width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen></iframe>

Note that the video has a fixed width and height and it will not be responive. To make the YouTube video responive, you can wrap it into a container like this:

html<div style="position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;">
	<iframe  width="425" height="344" src="https://www.youtube.com/embed/F9Bo89m2f6g" frameborder="0" allowfullscreen 
			style="position:absolute; top:0; left:0; width:100%; height:100%;">
	</iframe>
</div>

Demo

YOu can also take all style to a class or use JavaScript for cleaner markup, but this is not the subject of this tutorial.

You will also find out that embed YouTube scripts are not XHTML valid. But don't worry, give it a search and you will find plenty of tools to generate valid XHTML codes for videos on youtube.

You can also find here a good tutorial about inserting YouTube videos into a CMS like WordPress, Joomla or Drupal, PowerPoint presentations, Gmail and some other cool things

HTML5 video tag

With the introduction of HTML5, the video tag spread out very quickly with a good support by modern browsers. If after reading all this you are still not comfortable in creating your own player using the HTML5 video tag, you can use a simple yet powerful generator, to create a video tag for the player.

Video tag is used to add a video to the html page. At the moment the HTML5 video tag, supports 3 types of video files:

  • mp4 - MIME-type video/mp4
  • webm - MIME-type video/webm
  • ogg - MIME-type video/ogg
html<video width="320" height="240" controls>
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4">
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Demo

At the moment the video tag is supported very well by major modern browsers.

BrowserMP4WebMOgg
Internet Explorer
Chrome
Firefox
Safari
Opera (Opera 25+)