Differences
This shows you the differences between two versions of the page.
Previous revision | |||
— | wiki:embed_youtube [2020/02/07 09:38] (current) – Added tag _ki | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Embedding YouTube Videos in AB Wiki ====== | ||
+ | It is possible embed YouTube videos and videos from other popular video sharing sites in Audiobus Wiki pages. This tutorial demonstrates how to do it. | ||
+ | We recommend (as you will see below), using the "? | ||
+ | ~~NOTOC~~ | ||
+ | |||
+ | ===== Steps ===== | ||
+ | This tutorial' | ||
+ | |||
+ | |||
+ | ==== STEP 1: Get the Link ==== | ||
+ | There are a number of ways to get a YouTube link. If you are on YouTube watching a video, you can grab the URL from your browser' | ||
+ | |||
+ | If you already have a link, move on to Step 2. If you know how to get the link, grab it and move on to Step 2. | ||
+ | |||
+ | The steps for extracting the YouTube URL for an embedded varies depending on the browser you are using and the OS. | ||
+ | |||
+ | On iOS Safari: | ||
+ | * tap on the Share arrow which will bring up a Share popup | ||
+ | * tap and hold on the URL and choose Copy from the popup that appears | ||
+ | |||
+ | On MacOS Safari: | ||
+ | * Control-click the Share arrow and choose "Copy Video URL" from the popup that appears | ||
+ | |||
+ | |||
+ | ==== STEP 2: Examine the Link ==== | ||
+ | YouTube links come in two flavors. How you proceed depends on what form the YouTube link is in. | ||
+ | |||
+ | * If your link contains "/ | ||
+ | * Otherwise, you can either copy the video ID and create the embed manually, or you can have YouTube convert the URL into the "/ | ||
+ | |||
+ | |||
+ | === Using the vshare toolbar icon === | ||
+ | If your link is in the format **watch?v** format (shown below), you can use the toolbar to embed the video. | ||
+ | |||
+ | <WRAP indent>< | ||
+ | |||
+ | * Click where you want the embedded video to appear on your page | ||
+ | * Click on the vshare tool icon {{: | ||
+ | * You are done! See optional formatting options farther down on this page. | ||
+ | |||
+ | **You can also create an embed manually:** To do this, | ||
+ | |||
+ | |||
+ | === Get the ID (or convert the URL) === | ||
+ | If your link is not in the **watch?v** format, you can | ||
+ | * copy the video id from the link and create the embed manually | ||
+ | * or | ||
+ | * have YouTube convert the link into **watch?v** format and use the vshare toolbar icon as described above. | ||
+ | |||
+ | <WRAP indent> | ||
+ | **If you prefer to use the vshare toolbar icon**: you can convert the style of link that you have to the **watch?v** form. To do this: | ||
+ | * Paste the link you have into your browser to visit the video on YouTube. | ||
+ | * Once the video loads, copy the URL from your browser' | ||
+ | * You should now have a URL in the **watch?v** form and can use the directions in the previous section. | ||
+ | </ | ||
+ | |||
+ | **To create the embed manually**, copy the video id from the YouTube URL and proceed to the next step.The video ID is shown in bold in the example above. It is all the characters between " | ||
+ | |||
+ | <WRAP indent>< | ||
+ | | ||
+ | |||
+ | ==== STEP 3: Creating an Embed Manually ==== | ||
+ | * Place the cursor where you want the video to appear on the page. | ||
+ | * Use the following syntax to embed the video < | ||
+ | * **NOTE:** Make sure that there are not spaces between the '>' | ||
+ | * Use the video id you copied in place of ' | ||
+ | |||
+ | Here is an example of a properly set up video embed. The code used is: | ||
+ | |||
+ | {{youtube> | ||
+ | | ||
+ | {{youtube> | ||
+ | |||
+ | |||
+ | ==== If Something Goes Wrong ==== | ||
+ | If you get the video ID wrong or if you have extra characters (such as a space before the ID), you may see something like the following. **The most common problem** is a space character between the ">" | ||
+ | |||
+ | |||
+ | | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | {{tag> |