Homestead Blog

If I’ve heard our members say it once I’ve heard it a thousand times: “When are you going to make it easier for me to add a YouTube video to my site?”  I really didn’t want to start on another thousand times, so… we built it!  We’ve just added a new YouTube element to SiteBuilder; here’s Jerry, the product designer responsible for it, to tell you about it — Rochelle.

You’ve probably noticed that websites now use lots of video. Services like YouTube have made it possible to add videos to a page by copying and pasting some HTML code into it. Some of you have already used SiteBuilder’s HTML Snippet element to add a video this way.  But it ain’t easy.  Adding HTML code can be kind of complicated, and frankly it isn’t the way we wanted to make you do it.

So we built you something I think you’ll like: the new YouTube element in SiteBuilder. No need for understanding or handling HTML code anymore–adding a video to your site is as easy as copying and pasting the URL of the YouTube video from your browser’s address bar.  You’ll also be able to see how the video player will fit in with the rest of your site on the SiteBuilder stage (the draft layout you see as you work on a web page in SiteBuilder).

Let’s try it out and add a video to a web page.  First, let’s drop the YouTube element onto our site by simply clicking it in the element menu under the “add images and files” element icon:

When you first drop your element on the SiteBuilder stage, it will look like this:

Now let’s find a video on YouTube to add to our page. To get there, go to www.youtube.com in your web browser, or just click the ‘YouTube’ link in the Properties Editor.  Let’s add my favorite video of the Internet Fairy. All we have to do is highlight or select the URL in the address bar and copy it.

You’ll find the URL you need in the address bar at the top of your screen:

We simply highlight that address from the YouTube page and copy it.  Then we go back to the page we’re building in SiteBuilder, and paste that URL into the ‘YouTube URL’ field in the properties editor in SiteBuilder.

You’ll notice that the element on the stage now shows us how the player will look on our web page.  We’ll be able to see the video itself when we’re done editing our element and we preview or publish our page.

We can control the way the video behaves, too.  There may be times when you’ll want a video to begin playing automatically as soon as a visitor gets to your page. In general, though, unless the video is the main focus of the page, you’ll probably want to let your visitors decide whether or not to watch the video. This is especially true if you have more than one video on the page. So for now we’ll leave the ‘Play Automatically’ option unchecked.

You can also choose whether or not to let YouTube suggest related videos to your visitors when they’ve finished watching your video. You’ve probably seen YouTube recommendations before; they look like this:

You get to decide if other content from YouTube would be appropriate for your purposes, or whether it would be distracting.  For now, let’s leave ‘Include Related Videos’ checked.

One of the best things about using the new YouTube element to add a video is that you can now customize the player’s appearance and see the changes directly on the stage.  For our example, let’s choose a different color for our player; how about dark blue:

Here’s how that will look:

We can also add a border of the same color to outline the player more:

And then we can preview our work; notice that the video plays right on the stage:

If we like what we see, all we have to do now is publish it:

And that’s it!  Adding a video is now just a simple copy and paste from your browser to SiteBuilder. Give it a spin; I recommend starting with Ninja Cat, one of my personal favorites: [http://www.youtube.com/watch?v=muLIPWjks_M].  Have fun!