September 30, 2013 E3

How to Embed and Style Videos in WordPress [VIDEO]

Hi everyone, and welcome back to the Web Design with WordPress 101 Course. Today I’ll show you how to embed a video on your WordPress site.  An embedded video is a video that is displayed on your site, but hosted on another. For example, YouTube is a popular video hosting site that people use to upload their videos to share with others. Once the video is uploaded to YouTube you can embed that video on another site without having to upload the video to that site as well.

Embedding videos, as opposed to just adding them directly to your site, allows you to save the space the video would take up on your server by allowing you to play it from another location. I’ll also show you how you can use some simple HTML to manipulate the presentation of the embedded video on your site during this class.

Embedding a video is the same whether you are embedding the video in a post or page. Simply open up an editor and type in the URL address of the video you’d like to embed. WordPress has an auto embed function that will embed a video from certain sources if you just type the URL for the video in the text editor. WordPress will only allow you to embed video from a trusted web site that they’ve approved, so if an embed appears not to work check to make sure the source of your video is from one of the sites listed in the codex link in the description of this video. http://codex.wordpress.org/Embeds.

You can also choose to use the shortcode which allows you to set various options related to your video. A shortcode is like a place holder for a piece of code that has been programmed to do a specific task. So when you type the shortcode in your editor, WordPress will recognize the shortcode you used and run that particular piece of code associated with it. Using the shortcodes for WordPress allows you to avoid directly manipulating the code associated with your site. There are several shortcodes that are associated with embedding videos from different sites. Let’s take a look at the youtube shortcode and how it’s used to embed a video.

Shortcodes are enclosed in brackets and usually used to embed an audio, video or image file on your site. To embed a YouTube video on your site, type in the following: bracket — youtube — space the URL address of your video- and a closing bracket. This statement will embed the video on your page. You can alter some of the attributes of the video by including extra terms in your shortcode. To alter the height and width of your video type &-h-=-desired height-&-w-=-desired width. Make sure you include this before the closed bracket. Now the video should display using the size you selected.

You can also choose to hide the related videos that are usually displayed after a youtube video is finished.  Just add the following to your shortcode after the URL for your video:  &   r   e   l   =   0.

If you want to start the video from a specific place, identify the start point you desire in seconds and enter the following after your video address : &   start   =    and the place where you’d like the video to start in seconds. You can also stop the video at a certain point by using a similar statement: &   stop   = and the place where you’d like the video to stop. These instructions are specific for the youtube shortcode. Check the description below for a link to the instructions on embedding video from other sources other than youtube.

There are other ways to manipulate your video besides using the attributes of your shortcode. You can also use HTML to change how your video is displayed on your site. HTML stands for Hyper Text Markup Language and it’s used to create files that are meant to be displayed as pages on a web site. Using HTML we can determine where our video will be displayed on the page, or how much space is between the video and the surrounding content. I’ll show you how to do a couple of simple tasks that are frequently used when embedding a video.

***Useful Links***
List of site you can embed from:  http://codex.wordpress.org/Embeds
Border Properties:  http://www.w3schools.com/css/css_border.asp
Shortcode Instructions:  http://en.support.wordpress.com/shortcodes
Learn HTML at W3Schools:  http://www.w3schools.com/html/default.asp

Leave a Reply

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