How to Add Video to WordPress + SwiftCMS

This screencast covers how to add video from the simplest to more customizable / powerful methods, all of which are fairly simple. The methods are:

  1. Simple direct addition of a youtube link. Super simple. Not very customizable but fast and easy.
  2. Widgets (for sidebar, footer). Also very, very simple, fast, and a bit more customizable.
  3. In-Content Widgets + VTubeTools.com
  4. Snippets Plugin + VTubeTools.com
  5. Lightwindow Plugin. More customizable but takes a few steps and some attention.

Note: In all cases we upload to youtube and embed from there. The upsides to this: (1.) It’s a “streaming server” vs. “progressive download” – meaning it optimizes to suit your bandwidth (2.) It plays on everything, regardless of flash installation, including iPhones and iPads. (3.) YouTube is the #2 Search Engine in the world, ahead of Yahoo and Bing, and thus having keyword-optimized videos on youtube is a traffic method in itself (4.) It is the simplest method, and free. (5.) It’s simple to upload, including from your phone – using iPhones and Android phones you can shoot, edit, and upload all from your phone – hands down the fastest, easiest way to get nice looking video online.

TIP: See this article – http://swiftwebdesigner.com/youtube-tips – YouTube Tips – for advice when uploading to youtube.

METHODS of Adding Video To Your SwiftCMS + WordPress Website:

1. Adding Video into a Page or Post (Easiest)

Just add the video on it’s own line, NOT linked (click the chain-breaking icon if needed to remove any hyperlink) into any post or page and it should work. Note: as of this writing, youtube.com links work, but youtu.be links do not BUT the code is the same for either case, so if the link you have is youtu.be, replace it with “htttp://www.youtube.com/watch?v=” before the unique code.

how to embed video in wordpress

2. Adding Video to the Sidebar (or Footer or Header) (also very easy)

The below graphic sums it up, but there’s just 3 easy steps to embed:

  1. Drop the widget in. A “widget-area” is like a bookshelf – you can easily put any type of book into it just by dragging and dropping. Go to Appearance >> Widgets
  2. Open the video you want to drop in, on youtube, and copy the URL (right-click “copy” or Control-C (Windows, Linux), Apple-C (Mac) to copy. Grab the whole URL or just the unique portion at the end.
  3. Drop in the code into the widget-controls like you see below. Remove the first http://youtu.be/ portion if needed.

how to add video to wordpress

 3. In-Content Widgets

This is for people who need greater control over how the video is embedded. By the way, this can be useful for embedding webinars with a button that’s hidden for most of the video, then at the end it appears. Deal with the video and button separately – but first, the video: –  Steps are…

  1. Enable in-content Widget. Go to SwiftCMS >> In Content Widgets. Click the box. You’ll notice that next to each of the possible in-content widgets is a short-code, i.e. [ content-widget:1 ] BUT without the space before content or after 1 (we can’t do it here, because we use these on our site!) – copy this before you leave the page.
  2. Next, go to Appearance >> Widgets. On the far right, you’ll notice “Content Widget 1”. You can drag any content into this widget, by the way – including the youtube widget referenced in method 2 above. Assuming you want greater control, then drag in “text” – this will give you a simple text-widget which isn’t “code-checked” by WordPress’ formatter, meaning, WordPress doesn’t check the contents for errors, it just dumps any of this text into the page verbatim – just what you need.
  3. Drop the embed code into the page where your media will go – simply type  [ content-widget:1 ] (without the space before content or after 1 (we can’t do it here, because we use these on our site!)), plain text, probably on its own row.
  4. Last, generate the embed. Use this to embed from vimeo, youtube, hulu, or any other widget-source. If your video is on youtube, go over to VtubeTools.com to quickly and easily customize the embed code – this allows you to embed at high definition, hide the youtube logo after a few seconds, etc.  Paste this code into the text-widget, the whole bit starting with <object… or <iframe… etc. through the entire bit.

 4. Snippets (Moderate to Advanced)

Snippets are very powerful for dropping in advanced media with absolute control. Generally, this is for people who know some at least basic HTML. Note that snippets can also contain variables inserted on-the-page, making it even more possible to make a pseudo-database style website.

To use this:

  1. Enable the plugin “Post Snippets”
  2. See documentation on the original author’s site at http://wpstorm.net/wordpress-plugins/post-snippets/

5. Lightwindow Plugin (Moderate to Advanced)

Lightwindow is another flavor of lightbox, thickbox, etc. and it supports video embed. See a  working example at http://InfinitySolar.net. This requires your ability to generate the icons separately as well as advanced understanding of video embeds, but that said, if you understand those concepts and have the ability to work with them, it’s actually quite simple. We’ve done the hard work of testing many different types of pop-ups, and using it is actually pretty easy. To use:

  1. Enable the plugin “Lightwindow”
  2. You’ll probably want to enable “Post Snippets” as well, or wordpress is likely to strip out the actual HTML code in an effort to protect you from messing up the page.
  3. Below is an example of the actual post-snippet we created that may help you:
On the page where the video is embedded, we just drop in a shortcode [videohome]

Then on Settings >> Post Snippets we have a snippet that titled “videohome” that contains

<a href=”http://www.youtube.com/embed/KLtap-v_QXg?&autoplay=1&rel=0&theme=light&showinfo=0&modestbranding=1&hd=1&autohide=1&controls=0&color=white” class=”lightwindow page-options” params=”lightwindow_width=800,lightwindow_height=450,lightwindow_loading_animation=false” title=”Solar Starts at Home” >
<img title=”solar-panel-installer-orange-county” src=”http://7149218168.swiftwebdesigner.com/files/2011/06/solar-panel-installer-los-angeles.jpg” alt=”” width=”350″ height=”250″ />
</a>

Questions? Need more help? Ask below and we’ll update this page.