Embedding Google Maps in WordPress

This is a tutorial to get your custom Google Maps embedded into WordPress. Your custom Google Maps from My Places can be embedded easily into a WordPress post. First, create a My Places custom map, you are basically creating the overlay content for your Google map. After saving your map, click the link button (chain icon). This brings up the Customize preview panel (shown below). At this point you can:

  • size your map including specific width and height
  • position your map by drag it around
  • set the zoom level you desire
  • select one of four map types to initially display (Standard, Satelite, Terrain, Google Earth)

When you have your desired preview of your map, copy the generated HTML and paste into your WordPress post in text mode. Keep in mind that there are two Google map engines: classic maps (v_1.0) and a newer map API (v_2.0). My example is from the classic engine. The toolsets for the two engines are not equivalent at this time.

customize_embed_code2

The actual Google Map…

Getting iPhone HD Video Online

I recently upgraded my iPhone to the 4S model, where Apple has upgraded the camera chip and lens design for improved photography including; being able to capture HD 1080p video. This post attempts to cover the process of getting the iPhone’s new HD 1080p video to a WordPress site. Related to this topic, I wrote a similar post called Getting Good Video with Vimeo.

Getting video online and into WordPress is more involved than moving iPhone images to a WordPress site. Firstly, you should realize that source video content should not be uploaded directly to your WordPress Media Library. Video content is data heavy and especially with HD quality video, you need a streaming video server, a standard Apache server with a WordPress installation can’t serve that much video data to your viewers. The server limitation is addressed by setting up a video stream service from You Tube or Vimeo. The solution is to embed the video’s URL into your WordPress post and a video player will pull optimized video content from the streaming server. Optimized video can have many parameters, compressed MP4 video would be a video format that allows for compression and is optimized to stream efficiently from a steaming server. You Tube or Vimeo will provide video streaming for free, but if you plan on providing HD quality video to your viewers, then you will need to upgrade to a paid streaming account. I purchased a Vimeo Plus account for $60 a year. With the Plus upgrade, Vimeo provides me with better video rendering and the capability to upload 1080p source video. Without a Plus account, Vimeo limits free-accounts to only limited HD 720p uploads. Don’t mess with the a free account if your goal is HD content on your site. All the quality HD content I have viewed on Vimeo have been contributed by authors with “Plus” status.

iMovie’s video cam import options

Getting your iPhone video clips to your video editing application, in my case; iMovie, requires connecting your iPhone with a USB cable, and importing the clips with the video cam import button. There is also a wireless method of sending an iMessage to yourself with the desired video clip attached. Note: iCloud syncs only photos, not video, so iCloud is not an importing option to your Mac. Importing a lot of video into iMovie can be time consuming because iMovie must first generate thumbnail images of the imported video. I use the QuickTime player to do an initial edit of the poor clips, importing only video with potential into iMovie.

Uploading your finalized project within iMovie to Vimeo is easy just select Vimeo from the  Sharing Menu. Generally, you want to upload the best source video to Vimeo that you have, so click the  HD 720p or HD 1080p format. Then, from your Vimeo Plus account, you should review and select all your video settings to create your custom defaults. Take the time and create a preset theme for your video player, this will keep all instances of the video player looking and operating consistently within your WordPress site. Vimeo Plus users have additional video settings that basic accounts do not have, including; which domains can show your videos, as well as, hiding them from the Vimeo.com site. Many additional HD options with Vimeo are covered on their FAQ page.

The last step in getting your video online and into your WordPress post is the embedding step. I have not found a good WordPress plugin for importing Vimeo content yet, so you need to copy the necessary code snippet into your post editor in HTML mode. There are three ways to do this:

  1. Paste the Vimeo URL into your post.
  2. Use the Vimeo shortcode and an associated WordPress plugin.
  3. Copy and paste the Vimeo iframe embed code into your post editor.
Universal embed player on iPhone WordPress post

Don’t use the first two, because they may not include the universal embed code and they may fail to scale your videos properly in mobile devices and tablet devices like an iPad. It will also ensure that the proper size and format (Flash vs. HTML5) is streamed to your device, letting Vimeo deal with the various sizes, devices, and formats required on the Internet. The iframe embedding HTML code is found in the embedding panel (Get Embed Code link) of your video’s settings when logged into your Vimeo.com account. You can reuse this code snippet for future video posts replacing the Vimeo id number and adjusting the width and height if desired.

OK, now the reality check from Vimeo:

“Note while 1080p is higher resolution, please be aware that it can take significant resources on your viewers’ computer and may cause choppy playback.”

You’ve got this awesome HD 1080 video content online but your viewers may not have the internet bandwidth, computer horsepower, or monitor resolution to see the video’s HD quality. HD 1080p video has twice as much data as HD 720p video. From my tests, it is very difficult to see the difference in quality between 720p and 1080p, unless your viewers enlarge your video to full screen mode and my guess is that most viewers don’t know about this option unless they are specifically reminded to view in full screen mode. It may make sense to provide just HD 720 video to your audience unless they are from South Korea and can pull down 50MB/sec. On the flip side, 1080p seems to be a standard resolution for many large screen electronics, so you might want to get your video content ready for the future.

Genesis Framework

I am trying a new theme/framework called Genesis. In an effort to avoid having older posts be buried by newer posts, this theme design tries to emulate a magazine layout. By configuring, the homepage with a feature slider widget, I can direct the browser to older posts that might not be displayed on the homepage anymore. There are also two feature lists (under the feature slider) that serve the same purpose; linking readers to hidden content. Hopefully this new design will make better use of valuable home page real estate and let users quickly discover what my web site is all about. Let me know what you think. In the future post, I am going to write about my migration from WordPress’ default Twenty Eleven theme to the Genesis framework.