WordPress School: Video

Images and video are the most common content published in WordPress and the web in general. In today’s tutorial from Lorelle’s WordPress School you are going to learn how to embed a video into a WordPress post as part of the ongoing work on the article series.

In the first article in the five-part article series you were to write an introduction article to your series. In the second post in the series you were to write a tutorial featuring headings, lists, and images. Today we are going to add video.

Your tutorial may not need a video but find something related to the subject to add to the post on YouTube, or make and upload one yourself to YouTube. Why not? It’s time to get a little more creative.

This tutorial requires you to learn two new words in WordPress: embed and shortcodes.

What are Embeds?

Be Brave with Video

A friend of mine found a new lease on life by experimenting with the web cam on her new laptop. Within short order her characters “took over,” leaving me laughing so hard I wet my pants. Don’t fear video as content. Have fun with it. Incorporate it into your WordPress site to accompany the contextual content.

Just like our use of the word embed in English, “to fix an object firmly and deeply in a surrounding mass,” so we embed virtual objects in WordPress.

Images are embedded in WordPress. You upload them to WordPress and WordPress generates an embed link to the image in HTML to hold it in place within the mess you call content.

Maps, calendars, and other third-party content and code maybe embedded into a WordPress site as well. Remember, WordPress.com does not allow embedding of most code. They have special embed instructions for the things that are permitted.

Videos are embedded into content on WordPress.

Videos are most commonly not uploaded to your site for embedding. The files are huge and the drain on your hosting resources is typically expensive. Most people upload their images to a third party such as YouTube, Vimeo, Viddler, Daily Motion, etc, or a Content Distribution Network (CDN – cloud storage), and embed a link to the image on their site. VideoPress is available on WordPress.com and self-hosted sites as a premium service to upload and store videos for embedding into WordPress sites as well.

Video embed codes include instructions on how the video is to be watched on your site. This includes whether or not the video is to use an on site or native video player or the one provided by the video hosting service. When you are watching a YouTube video on a website, for example, the player is the YouTube player, not a video player on the site.

I’m keeping these tutorials simple, so we will only be working with third-party hosted videos for now.

What are WordPress Shortcodes?

I will be spending a great deal of time talking about WordPress Shortcodes, so this is a quick introduction.

WordPress Shortcodes are little snippets of code you may enter through the visual or text editors on your WordPress site, or in WordPress Widgets, that initiate actions. You were introduced to shortcode examples in the Contact Page assignment.

In this assignment, you will become familiar with video shortcodes in WordPress.

Please note that not all of the shortcodes I will be featuring in this tutorial are built into WordPress core. Some come from the Jetpack WordPress Plugin, which includes many WordPress.com features and shortcodes.

How to Embed a YouTube Video

If your site is on WordPress.com, follow these instructions carefully. The process is more complicated than it needs to be.

Begin with a copy of the address of the YouTube video copied from the address bar in your browser and follow these instructions exactly.

1. Edit the second post in your article series on your test site.
2. Place your cursor on the blank line where you wish the video to appear.
3. Paste the link into the text or visual editor.
4. Save Draft or Update and Preview. See the video?

If it worked you will see the video. It usually works. If it doesn’t, well, we’ll get to that.

Yes, I was kidding. WordPress.com has made it very easy to embed a video from YouTube and many popular video formats by simply pasting in the link. But you aren’t here to learn just the easy way, are you?

Here are the specific things you need to know about embedding a YouTube video into your WordPress site.

• Check the YouTube Address: Until recently, if the YouTube address was the youtu.be shortcode, it wouldn’t work but WordPress has updated to include those links. Do check that the address is to the actual video, not the channel or a playlist.
• Video Down for Copyright Infringement: Yes, you just saw the video, it was awesome, and you want to share it immediately, but a video may be taken down for copyright infringement at any time. Or it worked last week but not this week for the same reason. Or the person who uploaded the video decided to take it down. These things happen. Simply remove the link and find something to replace it or skip it.
• Browser Requires Flash: If for some reason you are on a web browser or device that does not permit the use of Flash, some videos may not play on your device unless Flash is enabled. Just recently, YouTube announced it will now stream HTML5 video by default, deprecating Adobe Flash video streaming. This is a big step forward but wait a bit for the system to catch up and users to upgrade their browsers to the latest versions.
• It just doesn’t work: For some reason, the copy and paste method just doesn’t work in some WordPress installations. It’s in the core of WordPress but something interferes with the process occasionally. To force an embed, you may copy the embed code from YouTube by click their Share button, or use the Jetpack Plugin YouTube shortcode: [youtube=http://www.youtube.com/watch?v=A1B2C3D4E5F6-1234].

The WordPress Shortcode for YouTube videos doesn’t just set the video in your post or Page alone. It has parameters you may add to adjust the size, starting point, and change the look of the player. See the YouTube support page on WordPress.com for specifics and experiment.

For more information on embedding YouTube Videos in WordPress and WordPress.com:

• YouTube — Support — WordPress.com
• Videos — Support — WordPress.com
• Embedding YouTube videos into your blog posts – WordPress.tv Videos
• Embedding videos – WordPress.tv Videos
• How to Easily Embed Videos in WordPress Blog Posts – WPBeginner
• Why You Should Never Upload a Video to WordPress – WPBeginner

Other Video Embed Formats

The above technique works with a variety of video formats including Vimeo, Daily Motion, blip.tv, Flickr video (and images), Google Video, WordPress.tv, Revision3, Hulu, and Viddler, among others.

There are also shortcodes to help you embedding a video from Vine, Vimeo, Viddler, Ustream.TV, Twitch.TV, The Internet Archive, TED Talks, Hulu, Flickr Video, Educreations, Dailymotion, CNNMoney Video, and AolOn. I’m sure there are others I overlooked.

Assignment

Your assignment today is to find a video that best relates to the topic of your article series and embed it in the second article in your five part article series.

You don’t have to stop at one, but use good judgment. After all, you are supposed to be teaching us how to do something in this tutorial.

If you would like to be creative and create your own video, give it a try. Almost all phones and computers have a web camera. Play with it. Or create a Powerpoint slideshow video and upload it to YouTube or your favorite video host.

If you have already published your second post, edit and add the video, update, and share a link and talk about your experience in the process on Google+ with us in our WordPress School Google+ Community or let us know in the comments below. The conversation can happen anywhere on the web about this course. Just point me to the conversation.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---