24. To embed a Youtube Video in your Website

03 Tháng Sáu 201511:50 CH(Xem: 8442)
24. To embed a Youtube Video in your Website
53Vote
48Vote
35Vote
22Vote
10Vote
3.718
pdf-icon2 (Download PDF)

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.
In the following example, we will embed a Youtube video in category “Video” in the Left Menu of the English section of your website. You will also learn how to embed a Youtube video 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.


blank

2. Click the “Share” button right below the video image. You will see some boxes and buttons.

blank

3. Click the “Embed” button. You will see a group of codes in the box underneath. This is the group of codes that you will put into your website. This group of codes is being highlighted. It is shown with white text on blue background. This group of codes is ready for you to COPY.

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.

blank

6. Now, copy the group of codes.

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.

blank

  • Second method: Click “Edit” on the top menu of your web browser, then select “Copy” in the dropdown list.

blank

  • Third method: Press and hold the “Ctrl” key, then press “C” key on your keyboard.
Now, you are ready to add a new video article and embed the Youtube video.

Suppose you have already logged in the Control Panel.

7. Click “Content Manager” on the Top Menu. Select “Video & Audio” in the dropdown list.

blank

8. Select the appropriate language site. Since we are adding a video clip the English site, you will click the box near the upper left corner and select “English Site”.

blank

You will see a list of existing videos of this language site.

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.

blank

12. Click the “HTML” button among the editing tools. The “HTML Source Editor” screen will appear. You will PASTE the group of codes in here.

blank

13. Click the mouse button inside the white box then PASTE the codes you have already copied in the previous step.
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.

blank

  • Third method: Press and hold the “Ctrl” and press the “V” key on your keyboard.
14. When the codes appear in the box, click the “Update” button. You will be back to the video record.

blank

15. At this moment, you will see a black frame in the “Description” box, on the left side. This black frame represents the embedded Youtube video. If you want the video to be centered in the text column of the web page, click the icon for centered paragraph. The black frame will be moved to the center.

blank

16. In the “Category” section, click to check the box for “Video”.

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.

blank

- Click the right button of your mouse. A pop-up list will appear. Select “Save Image As…”  (Or select “Save picture as…” if you are using Microsoft Internet Explorer), then save this image in your computer. You must remember which folder you have saved this image.

blank

In this example, we will save it in the “My Document” folder.

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.

blank

19. Click on folder “Media”. This is where you will store files related to video and audio.

blank

20. Click the “Upload” button near the upper right corner.

blank

21. The “Upload Files” screen will appear. Click the “Add” button

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.

blank

23. You will be back to the “Upload Files” screen. Now, click the “Upload” button. When the message “All files have been uploaded” appears, click “OK”. Then click the “Close this window” button and answer “Yes” to confirm.

blank

24. You will be back to the file area of your web server and will see your newly uploaded file here.

blank

25. Click on the filename, then click the “Insert” button. You will be back to the video record. The thumbnail image box is now filled with the path to the image file. A thumbnail image will appear above the path.

blank

26. Leave the rest of the boxes as they are. Note: When you add or embed a video in the “Description”, the “Hot box” does not apply. That means the video will not be shown in the “HOT VIDEO” box on the web page. The “Hot Box” applies only to video that is inserted into the “Media Link” box. Later in this article, you will learn how to embed a Youtube video by using the “Media Link” box.

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.

blank

30. Click the thumbnail image or the video title; the web page will look like this.

blank

31. You have finished embedding a Youtube video in your website.

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.

blank

You will highlight the text in the address box, then copy.

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.

blank

3. Add a Thumbnail Image the same way as you have been instructed previously

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.

blank

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.

blank

1. Go to YOUTUBE (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.

blank

2. Highlight the text in the address box of your web browser. This is the web address of the video.

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.

blank

5. Find the place where you want to embed the video. Click the mouse. You may need to click at the end of the previous paragraph and press the “Enter” key to make a blank line. Next, click the icon for “Insert/edit embedded media”. You will see the “Insert/edit embedded Media” screen

blank

6. Click the mouse in the box named File/URL and paste the web address of the video you have copied in the previous step. Just press and hold the “Ctrl” key and press the “V” key of your keyboard to paste.

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.

blank

8. Click to check the “Constrain proportions” box. Fill in the first box with the width, in pixels, that you want. The second number will be automatically filled in for you.

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.

blank

10. Let’s move it to the center. Click on the yellow frame, and then click the icon for “centered paragraph”. The yellow frame will be moved to the center position.

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.

blank

You’ve just finished embedding a Youtube video in an article.

Until now, you have completed instructions on embedding a Youtube video in your website.
Gửi ý kiến của bạn
Tên của bạn
Email của bạn