How to embed videos in html site

Hi, could anyone tell me the best way of putting; or making accessible, training and promotional videos on my html web site please?

Also, having just made some in .mp4 format the file sizes are 650meg+ is there a better type?

Finally, I will probably need somewhere to store these and if anyone could recommend a hosting company that would be much appreciated. Hoping you can help.

Using a video tag is the best way to attach videos to web pages in modern browsers (now that Flash is no longer supported).

It is recommended that you provide three different formats as not all browsers support the same format - mp4, webm and ogv (although I have seen some references recently that you can now get away with just two formats).

The video tag defines the area to be filled by the video and the nested source tags identify the video in the different formats so the browser can use the first one it supports.

I don’t know much about videos but recently had to do a full screen video and this format worked well for me.

  <video id="bgvid" loop autoplay  preload="auto" poster="HP_002.jpg">
    <source src="video/HP_002-HD_720p.mp4" type="video/mp4">
    <source src="video/HP_720p.webm" type="video/webm">
    <source src="video/HP_002-HD_720p.ogv" type="video/ogg">
  </video>

As felgall said for modern browsers you may just need the 2 formats.

The easiest solution is to post the videos to YouTube, Vimeo etc. Then hosting, bandwidth etc. are taken care of. You just use the supplied embed code to make them appear on your site. Those services automatically generate the required file formats etc.

3 Likes

or you can fix the supplied code to replace the antiquated <iframe> tag with the more modern <object> tag that was introduced to replace it in 1997 (and which actually works in all browsers as far back as IE7)…

1 Like

You mean the shiny new HTML5 iframe element? :stuck_out_tongue:

This is good advice. I have used both for a long time now. Vimeo offers a really nice video management option and their video player works with several codecs/browsers. You can register free but for more storage and bandwidth you need to upgrade.

Also it is a good idea to consider long term video hosting. For example I have over 500 videos that I promote and if I were to host them on my server it would start to cause issues with performance and bandwidth. So it is easier to host with a different company that is dedicated to video hosting.

1 Like

You mean the one they introduced just after the pre HTML 4 iframe element had just become completely unnecessary because its object replacement is finally supported by all browsers making iframe obsolete?

That’s one of the problems with many of the tags reintroduced in HTML 5 - they are not shiny new - they are obsolete and just reintroduced to save people the trouble of updating the code in their HTML 3.2 sites (which is what most web sites are still using).

Yes, I was just being cheeky, of course. embed has a lot of advantages, and I was using it solely up until the video element arrived. But with YouTube embeds, I normally default to their embed code these days. Seems to work fine, so I’m happy with it.

It only requires the smallest change to their embed code to upgrade it from HTML 3.2 to HTML 4.

Just replace the

<iframe src=

with

<object type="text/html" data=

I generally just get the URL for the video as I have the object version of the rest of the embed code already in the page to display the video and just pass the URL to it for the display.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.