Embedding Youtube Video
From HostBaby Wiki
Contents |
Why YouTube?
One very simple way to add video to your site is to upload the video to YouTube, and then embed it in your site.
There are two major benefits to this:
- You don't have to worry about browser compatibility with different video types (Windows format vs. Mac format vs. Smartphones/Smart Devices) This ensures your video will be viewed by all!
- You not only expose your video to your own fanbase, but to YouTube's vast international audience. YouTube is one of the most popular websites in the world. Never a bad thing!
If you would rather upload the video directly to your site, See this tutorial: http://hostbaby.org/wiki/Uploading_and_Displaying_Video
So, the first thing you'll need to do is get your video uploaded to YouTube. I'll let YouTube help you with that.
You can check out their tutorial section here.
http://www.youtube.com/user/YouTubeHelp
Log into your Hostbaby account
For this example, we're going to assume you want to put the video on your homepage though you could easily put one on your Bio, Blog, News Page etc.
So, let's log in to your account. For legacy Wizard 2 users:
Go to: http://yourdomain.com/hostbaby2/ (replacing yourdomain.com with your actual domain.) Once logged in, click on Website, then Homepage Layout
For those using the new Site Builder:
Go to: http://yourdomain.com/dashboard/ (replacing yourdomain.com with your actual domain.) Once logged in, click on Manage Pages, then the edit the page/section you want to insert the video. This includes the widget section, which we'll go over in this document.
Leave this window open
Grab the Code
In a new tab or window, locate the video which you have uploaded to YouTube. It's important to simply search for the video without logging into a Youtube account (if you have one) for the purposes of this document; simply search for the video, and view it like a normal visitor. Your first step is to click on the "Share" link right below the video.
You'll then want to click on the "Embed" link that appears in the "Share" menu:
You can change the size, or allow related videos to show up once the video is done.
NOTES:
- MAKE SURE to check off the "Use Old Embed Code" check box like in the screenshot; embedding won't work on most wizard/sitebuilder sites otherwise.
- Videos wider than 500px may not display correctly in the majority of the templates on HostBaby.
- Widget spaces (for Site Builder accounts) are even narrower; you'll want to manually enter in the width dimensions in the "custom" dimensions section. 200pixels width works best with most templates, but you may need to experiment depending on your needs. The height should automatically fill in appropriate dimensions to keep the video in-tact.
- Widget videos may not have the ENTIRE control-bar to maximize the video, due to how narrow it is.
Pasting Your Code
SITE BUILDER USERS
Once you have your video set the way you want it to be, you'll want to copy the code YouTube provides you:
Now we need to add this code to the section of interest.
ADD TO A WIDGET
Log into the Site Builder Dashboard, and get to your Widgets section:
You'll want to drag over a "Code Snippet" widget, label the widget, and paste in the code from Youtube within the widget. Save your changes, and you should have a mini-video playing in a widget on your site!
ADD TO A PAGE
Log into the Site Builder Dashboard, and navigate to the page you want to edit. We'll use the Home Page in this example:
NOTE Any page with an HTML editable section will work.
Click on Manage Pages, and click on "Edit" under the page of interest (Home in this example)
Click on the HTML editor on your toolbars
Paste in the code from Youtube here! Click on Update, Submit your changes, and you've got a video embedded on your page!
WIZARD 2 USERS
Once you have it exactly as you'd like it copy the code, flip back to your Homepage Layout section, where you can now paste that code into the Welcoming Text section
Once you have it exactly as you'd like it copy the code, flip back to your Homepage Layout section, where you can now paste that code into the Welcoming Text section
- Make sure the Toggle Editor is on and you can see the 2 rows of buttons above your content area.
- Click the HTML button and a small window will open.
- Paste the YouTube code into the window (above, below, or between any content that is already there)
- Click Insert
- Click Submit
Click 'preview' located top left corner of the Wizard to view the video on your site.
If it looks good, you can now publish the site.
That's it! You now have video on your site!
Related link: Embedding Video and Photos
