I build websites with custom content management systems, and I also set up custom WordPress blog sites for clients. Often my clients have videos produced and are at a loss on how to add them to their websites.
This tutorial is directed at videos that are hosted elsewhere and give you an embed code for adding them to your website. I took these screen shots when I was emailing directions to Barbara at Island Alpaca on how to add video to her website. Please check out her wonderful alpacas and alpaca products.
The first thing you need to do is find the video’s embed code. Often, when a movie that you are watching is over, it will give you the embed code at the end. For example, here is a screen shot of a video hosted by youtube.com. In this case, you would highlight all of the code in the embed field and copy it.
This screen shot below if from a video hosted by plumtv.com. Many of my local Martha’s Vineyard clients have videos produced by Plum TV that they want to put on their websites. On the screen shot below, the movie ends with the share tab open by default, but if you click to the right of it on the embed tab…
… it will open with the embed code that you can copy by clicking on the copy code button in the bottom right.
The screen shot below is showing the text editor that is used in the Island Alpaca content management system. What I suggested that Barbara do first, is to put a line of asterisks where she wants to place the embed code for the video – because once you switch to the code or source view, it is sometimes hard to tell where to put it if you don’t know HTML (and sometimes even if you do).
Next you need to switch to the code or source view of the editor.
In Barbara’s editor, you would click on the Source button in the top left.
If you were adding it to a blog post, you would click on the HTML tab in the top right.
And if you have the wysiwyg editor that many of my other content management systems use, you would click on the code icon < > on the bottom right.
All wysiwyg editors have some way of switching to view the source or code view. If you mouse over their icons, they will often tell you which one is for which.
Once you switch to the code view – look for those asterisks, and highlight them and replace them by pasting the embed code.
You may need to change the width and height of the video embed code so that it will fit in your website design. You can see in the pasted code where the width=”” and height=”” values are. Those numbers represent the number of pixels each attribute is allotted. Web pages show 72 pixels to the inch, and some websites layouts are pretty narrow, so you may need to adjust the width and height. For Barbara’s site I had her adjust the video from 640 pixels wide to 480 pixesl tall, to 420 pixels wide by 315 pixels tall. Embed code may have the width and height attributes in more than one place, so look at all of the code that you pasted.
Once you add the embed code and adjust it, save your changes and the video will display on your web page.
Not all wysiwyg or text editors will show that the video code is in place when not looking at it with the html or code view, and some of them will remove the code if you make subsequent changes to the page so make sure you keep a copy of the embed code for the video someplace handy, in case you need to replace it.