imported>Tlosk |
imported>Arkalor |
| Line 1: |
Line 1: |
| {{RightToC}}
| | #REDIRECT [[Help:How To Embed a YouTube Video/Details]] |
| | |
| This page documents how to use the older YouTube video extension (which was adapted to embed videos from several other sites) on any page using simple code. The video is not uploaded to ACCWiki, but ''embedded'', meaning it is stored on YouTube, then called from there to be viewed on ACCWiki. Clicking the YouTube logo in the lower right of a playing video will take you to the YouTube page for that video.
| |
| | |
| == What video sites are supported? ==
| |
| This extension allows the embedding of videos from [http://www.youtube.com YouTube], [http://video.google.com/ Google Video], [http://www.archive.org/details/movies Archive.org], [http://blip.tv/ Blip.tv] and [http://www.gametrailers.com/ GameTrailers.com], as well as [http://www.tangler.com/ Tangler forums].
| |
| | |
| == How do I add a YouTube video? ==
| |
| To add a YouTube video, you need the id code for the video. The easiest way to find this is to look at the URL of the You Tube page for the video. The string of letters and numbers after "v=" in the URL is the id code. So for the URL: '''<nowiki>http://www.youtube.com/watch?v=lVuXnUr2VUQ</nowiki>''' the id code would be '''lVuXnUr2VUQ'''. If you aren't sure what to use, you can add the whole url in place of the id code. | |
| | |
| YouTube videos are embedded using two tags, with the id code for the video you want to show between them:
| |
| | |
| <code><nowiki><youtube>id code</youtube></nowiki></code>
| |
| | |
| "id code" is the code from the URL. So in our example, you would use:
| |
| | |
| <code><nowiki><youtube>lVuXnUr2VUQ</youtube></nowiki></code>
| |
| | |
| == Can I display the video at a smaller size? ==
| |
| You can change the width and height of the video box, to a maximum of 640x385 pixels. For best results, the height should be about 3/5 (60%) of the width. Some examples of good ratios include 200x120, 375x275, and 500x300.
| |
| | |
| If you specify width ''and'' height, and those settings are not in proportion to the YouTube screen, then you will have empty space around the video. In most cases, the width determines the screen size in this situation.
| |
| | |
| * Width is controlled with <code>width="xxx"</code>, where xxx is the number of pixels. The default is 640 pixels.
| |
| * Height is controlled in the same way with <code>height="xxx"</code>. The default is 385 pixels.
| |
| | |
| A full example would be:
| |
| | |
| <code><nowiki><youtube width="200" height="120">lVuXnUr2VUQ</youtube></nowiki></code>
| |
| | |
| {| width="90%"
| |
| |- style="vertical-align:top; text-align:center;"
| |
| | width="500" height="300":<br />
| |
|
| |
| <youtube width="500" height="300">lVuXnUr2VUQ</youtube>
| |
| | |
| | width="375" height="225":<br />
| |
|
| |
| <youtube width="375" height="225">lVuXnUr2VUQ</youtube>
| |
| | |
| | width="200" height="120":<br />
| |
|
| |
| <youtube width="200" height="120">lVuXnUr2VUQ</youtube>
| |
| |}
| |
| | |
| == Can I add a caption? ==
| |
| You can add a caption to a video using the image thumbnail styles. You can use all normal wikitext formatting in your caption.
| |
| | |
| The basic form is:
| |
| <pre>
| |
| <div>
| |
| <div class="thumbcaption">CAPTION</div>
| |
| <youtube width="200" height="120">ID</youtube>
| |
| </div>
| |
| </pre>
| |
| | |
| This code places the caption, in a smaller font, below the video:
| |
| | |
| <pre>
| |
| <div class="thumb tright" style="width:256px;">
| |
| <div class="thumbinner">
| |
| <youtube width="200" height="120">ID</youtube>
| |
| <div class="thumbcaption">
| |
| CAPTION
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </pre>
| |
| | |
| == Can I center the video, or move it to the right? ==
| |
| <div class="thumb tright" style="width:256px;">
| |
| <div class="thumbinner">
| |
| <div class="thumbcaption">This is an important caption.</div>
| |
| <youtube width="200" height="120">lVuXnUr2VUQ</youtube>
| |
| </div>
| |
| </div>
| |
| You can control video placement using the image thumbnail style.
| |
| | |
| In this example you can add a video with a width of 250px, float it to the right of the page, and add a caption at the top. Simply edit the ID and CAPTION and pixel sizes to suit.
| |
| | |
| <pre>
| |
| <div class="thumb tright" style="width:256px;">
| |
| <div class="thumbinner">
| |
| <div class="thumbcaption">CAPTION</div>
| |
| <youtube width="200" height="120">ID</youtube>
| |
| </div>
| |
| </div>
| |
| </pre>
| |
| | |
| == Other usable video sites ==
| |
| The video extension also supports several other video hosting sites. Replace "id" with the unique identifier each site uses in their URLs.
| |
| | |
| ;Google Video
| |
| *<code><nowiki><gvideo gvid="id" width="width" height="height" /></nowiki></code>
| |
| *<code><nowiki><gvideo width height>id</></nowiki></code>
| |
| | |
| ;Archive.org audio and video
| |
| *<code><nowiki><aovideo aovid width height /></nowiki></code>
| |
| *<code><nowiki><aoaudio aoaid width height /></nowiki></code>
| |
| | |
| ;GameTrailers.com video
| |
| *<code><nowiki><gtrailer gtid="id"/></nowiki></code>
| |
| *<code><nowiki><gtrailer>id</gtrailer></nowiki></code>
| |
| | |
| ;Tangler forum
| |
| *<code><nowiki><tangler tid gid /></nowiki></code>
| |
| *<code><nowiki><tangler> tid | gid </tangler></nowiki></code>
| |
| *<code><nowiki><tangler>id=xxx|gid=xxx</tangler></nowiki></code>
| |
| | |
| == Examples of embedded video ==
| |
| * [[:Category:Video]]
| |
| | |
| [[Category:Help]]
| |