How to Include .mp4 Video in Webpage

Including a .mp4 video in a webpage has become very easy with recent advances. Here is the simplest way to do it:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<video width="320" height="240" controls autoplay>
  <source src="video.mp4" type="video/mp4">
</video>
</body>
</html>

You can make the above HTML code work without making changes to it if you save it a video.html inside the same folder as your .mp4 video file. rename the video file to video.mp4 and open the page in a browser to test it and you should see the video in a blank webpage. Simple.

Insert .mp4 Video in a WordPress Post or Page

The same basic method also works quite well in WordPress I discovered today. The only difference is you only need the video part of the HTML to paste into the WYSIWYG editor. Make sure you click the "Text" tab in the upper right corner of your editor to put it in text mode and copy and paste the following code into your post or page from the WordPress admin:
<video width="320" height="240" controls autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

Summary

As you can plainly see, it is very simple to include a video in any webpage with this method even in WordPress! Be sure to include the correct path to where you saved the video when using WordPress however. I like to use the current template folder myself, but you may use the uploads folder or any other folder you wish that you know the complete path to.

6 thoughts on “How to Include .mp4 Video in Webpage

  1.  ( 2012.02.21 19:09 ) : Good post. I learn something more caenlhngilg on totally different blogs everyday. It should at all times be stimulating to learn content from other writers and follow somewhat one thing from their store. I’d want to make use of some with the content material on my weblog whether or not you don’t mind. Natually I’ll give you a hyperlink on your internet blog. Thanks for sharing.

  2. Hi, thanks for this page with embed code for an mp4 movie in a WordPress page. I've followed your instructions and it works, but there are two small things I need to sort out.

    1. I don't want the movie to start playing when the page is opened. I'd prefer to give the viewer that choice. Setting autoplay="false" does not make any difference.

    2. The controller bar appears wider than the actual video. I had set the size as in your example, my values were width="620" height="350". When the page opens the video seems to be the right size for a split second, then becomes smaller, but the controller remains wider and lies on top of the video. I don't think this can be right.

    I realise you are not here to offer duffers technical support but I'd be most grateful for help and will add a thank you note with a link to jafty.com at the end of the post.

    1. There are a lot of advances in this technology. Although I can't comment on it off the top of my head, I know it can be done with JavaScript and newer HTML5 standards. If you are interested in hiring me to do it, I'd be glad to help, otherwise Google is your best friend. Keep in mind what I said, JavaScript and HTML5 as that is the key to getting it done. You can email me directly at linian11@yahoo.com if you need further assistance. -Ian L.

Leave a Reply

Your email address will not be published. Required fields are marked *