- 01. Basic Procedure in Managing Your Webiste
- 02. To Upload a Top Banner to the Website
- 03. To Add a Category to the Webiste
- 04. To Create the Top Menu for the Webiste
- 05. To Add Category "About Us"
- 06. To Add the Contact Page to the Website
- 07. To Add an Article to the Website
- 08. To Insert a Picture into an Article
- 09. To Edit, Delete An Article
- 10. To Add a Category for Photos
- 11. To Add a Slide Show to the Website
- 12. To Edit, Delete a Category
- 13. To Add a Video Clip to the Website
- 14. To Edit While Viewing the Web Pages
- 15. To Change the Display of an Article List
- 16. To Change the Display of an Article
- 17. To Place an Advertisement on the Website
- 18. Display Types for Advertisements
- 19. How To Layout Your Homepage
- 20. To Show, Hide And Edit The Special Boxes
- 21. Search And Filter Tools In The Control Panel
- 22. To Setup Default Sizes For Images
- 23. To Insert a Video Clip Into An Article
- 24. To embed a Youtube Video in your Website
- 25. To Post a Book on Your Website
- 26. To Post a PDF book on the Website
Youtube is a website (www.youtube.com) with video clips posted by Youtube members. Youtube is a place for people to share video clips of their family, friends, organizations, and so on. We use the term “Youtube video” to refer to a video clip that is already posted on Youtube by yourself or any person.
This tutorial will show you how to embed a Youtube video in your website. What you will actually do is to provide a link to that video from your website. When a viewer plays this video, Youtube will feed the video to his computer.
The link to such video clip will be shown with a representative picture and the control buttons.
You can embed a Youtube video in:
- A category for videos in your website,.
- Or, any place in an article.
A. To embed a Youtube video in a video category of your website
Suppose your website already has a Video category which is a section for video clips.
If your website hasn’t got a Video category and you want to create a category for this type of content, please review “Article 13 – To Add a Video to Your Website”. After the Video category has been created, you will continue to do as follow.
1. Go to YOUTUBE website (www.youtube.com); find the video clip you want to embed. For example, your will embed the video clip “Dalat Scenery” in your website. The Youtube page will look similar to this.
4. However, you may want to uncheck the box [_] “Show suggested videos when the video finishes”. If this box un-checked, Youtube will not show related videos to your viewer when the video clip comes to the end. After this box is checked, the group of codes will change and the text is no longer highlighted. You will need to highlight this group of codes by clicking any where within the text. Then, you can COPY.
5. You can choose a different size of video frame other than the default size. Click one of the suggested video frame sizes underneath. Or, you can fill in the dimensions that you want. Note that the group of codes will be changed when you select a different frame size. And, the group of codes is not longer highlighted. You will need to click on the text to highlight it again before copying.
In this example, we will fill in the width as 500 pixels. The height of the video frame will be automatically filled in to fit the proportional dimensions of the video.
If you do not know how to copy, use one of the following methods:
- 1. First method: Place the mouse cursor over the highlighted text. Click the right button of your mouse and select “Copy” in the pop-up list.
- Second method: Click “Edit” on the top menu of your web browser, then select “Copy” in the dropdown list.
- Third method: Press and hold the “Ctrl” key, then press “C” key on your keyboard.
Suppose you have already logged in the Control Panel.
7. Click “Content Manager” on the Top Menu. Select “Video & Audio” in the dropdown list.
9. Click “Record Edit” near the upper right corner. A blank record will appear.
10. Fill in a title for this video in the “Title” box. For example, “Dalat Scenery”.
11. In the “Description” box, you will PASTE the embedding codes of the Youtube video. However, you cannot paste the codes directly in this box. You must use the “HTML” tool to do it because this group of codes is in “HTML” language.
If you don’t know how to paste, use one of the following methods:
- First method: Click the right button of your mouse, and then select “Paste” in the pop-up list.
- Second method: Click “Edit” on the top menu of your web browser, then select “Paste” in the dropdown list.
- Third method: Press and hold the “Ctrl” and press the “V” key on your keyboard.
17. In the “Thumbnail Image” box, you will fill in the file path for the thumbnail image. You need to get the thumbnail image from Youtube for this video and upload it to your web server.
Youtube normally shows a thumbnail image of a video in the list page. Just fill in the title of this video clip in the Youtube Search box and start searching. In the following example, we will search for “Dalat Scenery”. You will see the embedded video in the list along with a thumbnail image.
18. Next, you will upload this image to your web server. Find the box named “Thumbnail Image”. Click the “Browse” button on the same line with this box. You will see the file area of your web server.
22. You will see the files in your computer. Find the file of the thumbnail image you’ve just downloaded from Youtube. Click the filename, then click the “Save” button.
Purpose of [_] Hot Box. Check this box, the video will be displayed in the “HOT VIDEO” box on the website. If the HOT VIDEO box is setup to display only one video, the latest video with check in the [_] Hot Box will be displayed.
27. Now, you can save this record. Click the “Save” button.
28. The message “Data Added Successfully!” will appear in the upper left corner.
29. Check your website. Click the category “Video” in the Left Menu. The Youtube video you’ve just embedded will appear in the list.
B. Another method to embed a Youtube video in the video category
There is another method to embed a Youtube video in the video category of your website. The “Media Link” box is used in this method.
Embedding the video this way, you can utilize the function of the [_] Hot Box. However, the video frame size on the video page cannot be changed.
The steps are similar to the previous method with some differences.
1. You will copy the web address of the Youtube video. Go to the page of the Youtube video you want to use. Copy the text in the address box. The address box is normally near the upper left corner of the web browser. For example, you will embed the video clip “Dalat Scenery” in your website.
Here’s how to highlight. Press and hold the mouse’s left button at the beginning of the text. While still holding the button, drag the mouse over the text. Then, release the button. The text will be white on blue background.
Now, you will copy it. Just press and hold the “Ctrl” key; then press the “C” key on your keyboard.
2. Next, add a new video record. Fill in the “Title” box. Let’s fill in “Dalet Scenery 2”. In the Category section, check the box on the same line with “Video”. Do not insert the video in “Description” box. This time, you will paste the web address of the Youtube video in the Media Link box. Click anywhere in the box, then paste the text you’ve have copied in the previous step. Press and hold the “Ctrl” key, then press the “V” key on your keyboard to paste.
4. This time, let’s experiment by checking the [_] Hot Box to see if it will be displayed in the “HOT VIDEO” box on the web page.
5. Click the “Save” button (or the “Update” button, if you are editing an existing record). Now, that you have finished the task, go to your website to check. The video category looks like this with the newly added video.
C. Embed a Youtube video in an article
You can also embed a Youtube video at the top, bottom, or anywhere in an article.
Suppose there is an article about Dalat, a tourist destination, in your website and you want to embed a Youtube video in it. We will embed a video after the first paragraph.
www.youtube.com); find the video you want to embed in your article. For example, you will embed Youtube video clip “Dalat Scenery” in the article.
3. Copy the text. Just press and hold the “Ctrl” key and press the “C” button on your keyboard.
4. Next, you will login the Control Panel. Find the article “Dalat Destination” and open the record. The record looks like this.
7. If you want to change the video frame size, first, click inside the box named “Preview”. The representative image of the video will appear and the some numbers will be displayed in the “Dimensions” boxes. They are the current dimensions of the video frame.
9. Click the “Insert” button. You will be back to the article. A yellow frame will appear to represent the Youtube video you’ve just embedded. It’s now on the left side.
11. If you want to add a thumbnail image for the video, do as you have done in the previous part of this article.
12. Finally, click the “Update” button to save the changes you’ve just made.
13. You can now go to your web site and check. Click on the article “Dalat Destination”. The web page looks similar to this.
Until now, you have completed instructions on embedding a Youtube video in your website.