This may be preaching to the converted or seem like a primer on how to suck eggs for many techy types but we never tire of reminding our readers just how valuable and versatile web video can be. Today we are going to look at the vitally important technique of embedding video. But don’t panic – it’s really not that complicated. Embedding is simply the process of installing special code on your website that enables an in-situ / on site player to stream video from YouTube right into your own page.
What are the differences between embedded and locally hosted video?
As we mentioned above an embedded video is one that is hosted on YouTube and streamed into your site from the Youtube server. A locally hosted video however, is one that is loaded up to your site server and streamed from there. Although it may still be displayed within an embedded player ‘framework’ on your page. The advantages of embedding video hosted elsewhere should be immediately evident from this. An embedded video could be substantial in terms of data size and yet playing it puts no extra load on your own server or data account. YouTube is designed to stream video in the most efficient way and it also provides you with a nice ready-made player environment for your site, the player is very easy to customise and resize. Embedding also allows visitors to watch your video in situ and remain on that all-important landing or category page. And, it creates a useful mutual connection with YouTube that is extremely beneficial to your SEO effort.
So how do you start embedding video from YouTube?
Simples – below each video on YouTube you will see a button to ‘share’ – click on this and you will get another option to ‘embed’. The embed option will give you a line of code which needs to be copied and placed into the code of your webpage. This process may occasionally require a little expertise, as it is sometimes necessary to slightly modify other aspects of the code (known as CSS) in order to position the video correctly on your page. This is something we may be able to help you with if you are experiencing difficulties. Here is an example of the embedding code for one of our own promotional videos.
-iframe src=”//www.youtube.com/embed/pdz-_ybo1Ao?rel=0″ width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen” -/iframe-
- 1) The iframe tags tell your webpage to embed another document i.e. the youtube player interface within the html of your page.
- 2) Src – or source is the url to the video itself.
- 3) ?rel=0 – this bit of code at the end of the video URL is very important. It means don’t load a list of related videos when the chosen video finishes. Many business owners will want to have this feature enabled.
- 4) The width and height attributes set the size of the player window on your page.These can be set to almost any size you like but bare in mind the aspect ratio of the video (relative width to height) though you should never set your player window to a size that is greater than the maximum size of your video. Click the cog wheel on the YouTube player to see what this is.
- 5) Framborder – will draw a frame around the ‘iframe’ this is always best left at ‘0’ or off.
- 6) Allowfullscreen – is pretty self-explanatory. This attribute enables a button at the far right of the player bar (it looks like a box) that enables the viewer to switch the video to full screen display. We normally leave this on but you can disallow this if you wish.
