How can I get my YouTube videos to play on my website? This question seems to always come up when I am designing a website. A quick Google search for “videos on website,” gives you a multitude of articles and with really no clear direction to start. One of my biggest pet peeves from reading through hundreds of articles related to web design or programming, is that the writer assumes the reader knows way too much. I promise not to make that same mistake and will spell out everything you need to know.
Now there are several, SEVERAL different methods that you can go about to get your videos on the web. My preferred method is using YouTube to embed the video because of its simplicity and quality. The KEY benefits to doing this are as follows
- Your video will play on all iOS devices such as iPads and iPhones including all browsers (with no special code or fallback to write)
- You can turn up or down the quality of the video depending on your network connection
- HTML markup is generated for you (cut and paste)
- Your content is on a different reputable website creating back links to your website (important for search engine optimization)
Why Not HTML5:
HTML 5 (Hyper Text Markup Language) makes adding video extremely easy nowadays HOWEVER you must be careful when making the video compatible with all browsers and devices. While the syntax is actually quite simple which looks like this…
<video></video>
Then you would add your source file like this…
<video>
<source src=”example.mp4″ type=”video/mp4″>
<source src=”example.ogg” type=”video/ogg”>
<source src=”example.webm” type=”video/webm”>
</video>
Notice that there are 3 source files that have to be added for one particular video. The reason for this is that you have to have different file types for different browsers to be able to play the video. ALSO, the source is generally located on your own server (where your website is stored) and this means that the video will play either smooth or choppy depending on the viewer’s internet connection. There are several plugins that you can use to serve the video in a custom player, and you can really get complicated by using JavaScript or another language to ping the internet of the viewer and then serve a different video based on their bandwidth! Things can get complicated very fast. In the end, I have found that using YouTube makes life much easier not only for me, but for our clients as well.
At the end, I’ll add an example markup free for your download, but for now on to the Tutorial…
What you need:
- a free HTML text editor like:
- a video you’d like to play on your site
First…
Open your internet browser of choice and go to YouTube
Login if you already have an account, and if not then simply create a free account.
Once you are logged in then click the upload button at the top middle of the screen
Then “click to add video” or drag your video file on the screen. YouTube supports all of these video types:
- .MOV
- .MPEG4
- .AVI
- .WMV
- .MPEGPS
- .FLV
- 3GPP
- WebM
Upload times depend on the video size, but it generally doesn’t take too long. Once uploaded, now the easy part. Just go to your YouTube account that has the video on it. For example here is a video from our Three Point Oh! YouTube account.
Once you are at the video on YouTube click the share button:
Next you should see an option that says Embed:
Here you can change the dimensions of the video and then simply copy that code it generates into an HTML document between the <body></body> tag.
This is where you will use your HTML editor as mentioned above. If you are using HTML-Kit go to File –> New –> New from Template
Then choose…HTML 5 Standards Mode Document. The standard HTML page should look something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
We are going to add the code generated from YouTube to the <body> tag so your new markup should look like this.
Click to download source file for this tutorial…
Lastly, all you need to do is save this file and upload it to your server to view it on the internet. You can check out some working pages of this by viewing our company’s portfolio.
Thanks for reading, and I hope this tutorial was helpful for you. Like I said, i would like to hear what you guys would be interested in knowing “How To” do or what knowledge would be helpful for you. So please message us by any of the popular ways, facebook, twitter, google+, or just write a comment below. You can even email me directly at cmarks@3pointoh.com. Hopefully next week I can use your feedback and give another helpful tutorial!
