Differences

This shows you the differences between two versions of the page.

--- embed_youtube [2019/05/10 01:57] – Added link to ScytheSynth page as its its embedded videos and code were great. Paulinko
+++ embed_youtube [2019/05/10 04:58] – note about spaces espiegel123
@@ Line 1: / Line 1: @@
-<markdown>
+====== 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.
+~~NOTOC~~
-##Embed YouTube
+===== Steps =====
+This tutorial's steps are for YouTube, but the same basic principle applies for Vimeo and other supported video sites.
-####Step by Step
-. You must use a url that looks like this `https://www.youtube.com/watch?v=QBqHm8a68yE&feature=share`
+==== STEP 1: Get the Link ====
-.  To get such a url, use the share button from the YouTube video.
+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's location bar. If you are watching an embedded YouTube video, you can click on its share icon. You can also copy the URL of a link to a YouTube video.
-. Select the *copy* the link option.
-. Paste the link into the Safari address bar at the top.
-. Copy the address and paste it into your wiki page text
-. Select the portion of the url in between *the v=* and the *&feature*.
-. Paste the code into the correct location in the link like so:
-`{{youtube>QBqHm8a68yE?large|Textastic Tutorial Wiki Upload}}`
-. Place the code where you want the video to appear on your page.
-. Here's a page with [embedded YouTube videos](https://wiki.audiob.us/scythesynth) which you can look at to see the results or look at its code.
-. If you don't get the correct url or enter the wrong embed code, here's what you may see versus the correct code.
-![](https://forum.audiob.us/uploads/editor/7c/rd3jfm44jlp2.jpeg "")
+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 "/watch?v=....", you can take advantage of the {{:vshareicon.png|}} vshare tool in the wiki editing toolbar.
+  * Otherwise, you can either copy the video ID and create the embed manually, or you can have YouTube convert the URL into the "/watch?v" format and use the toolbar tool.
+=== 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><nowiki>https://www.youtube.com/watch?v=</nowiki>**QBqHm8a68yE**&feature=share</WRAP>
+  * Click where you want the embedded video to appear on your page
+  * Click on the vshare tool icon {{:vshareicon.png|}} and paste the URL.
+  * You are done! See optional formatting options farther down on this page.
+**You can also create an embed manually:** To do this,carefully copy the video id which is the series of characters between "v=" and "&" and follow the instructions below. Do not include the "&" character.
+=== 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's location bar.
+  * You should now have a URL in the **watch?v** form and can use the directions in the previous section.
+</WRAP>
+**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 ".be/" and "?"
+<WRAP indent><nowiki>https://youtu.be/</nowiki>**lfYZk8Fn4-A**?list=PLTnh-zr9cXzC6Tru8ApCZVGnjKhPDAkNE</WRAP>
+==== 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 <nowiki>{{youtube>videoID?medium|The Video Title I Want To Use}}</nowiki>
+  * **NOTE:** Make sure that there are not spaces between the '>' and your videoID. The vshare plugin will treat the space as part of the ID and the link will not work.
+  * Use the video id you copied in place of 'videoID'
+Here is an example of a properly set up video embed. The code used is:
+  {{youtube>2tKpLQrMcpA?medium|App Overview}}
+{{youtube>2tKpLQrMcpA?medium|App Overview}}
+==== 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.
+<markdown>![](https://forum.audiob.us/uploads/editor/7c/rd3jfm44jlp2.jpeg "")
 </markdown>