Welcome

Search Center

Official Documentation

Discuss:

Support Forum (Recent)

Other Resources:

Getting Help

Community HowTo's

Code Snippets

Wikidot Applications

Glossary of Terms

Index of Sites

What is Hot

Time in Toruń, Poland

[フレーム]

Users who watch this page:

...

Posted by Brunhilda on 07 Feb 2011 15:06, last edited by Helmut_pdorf on 04 Sep 2015 07:56

: divs video youtube

This How-To is for those who want to include both a video from YouTube in the page wrapped arround with the text and be able to write a little explanation of that video under it. Something like this:

I used the system I applied in including the pictures in the text in the same way explained here, i.e. one included for the left side of the text and one included for the right side of the text.

Video on the left side of the page

Create a page named "include:video-left" and put this code in it.

[[div style="margin:0.5em 1em 0.5em 0; float:left; border: 1px solid #877E3D; background-color:#FFFFFF;"]]
[[table style="width:{$width};"]]
[[row]]
[[cell style="background-color: #C5201D;"]]
[[html]]
{$video}
[[/html]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align:center; font-size:90%; font-style:italic; background:#D8DABE; padding:5px; border:1px solid silver"]]
{$text}
[[/cell]]
[[/row]]
[[/table]]
[[/div]]

To include it in a page, use this code:

[[include include:video-left
|width=
|video=
|text=
]]

These parameters serve for the following:

video = You put the code taken from YouTube.
text = Put the explanation of the video.
width = Put the width in px. You have to put the same number as it appears in YouTube code. For example, if you have this code:

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/rPu5EbIXxLY?fs=1&amp;hl=es_ES"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rPu5EbIXxLY?fs=1&amp;hl=es_ES" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

You should then write 640px in the parameter "width".

Video on the right side of the page

Create a page called "include:video-right" and put this code in it.

[[div style="margin:0.5em 0em 0.4em 1.2em; float:right; border: 1px solid #877E3D; background-color:#FFFFFF;"]]
[[table style="width:{$width};"]]
[[row]]
[[cell style="background-color: #C5201D;"]]
[[html]]
{$video}
[[/html]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align:center; font-size:90%; font-style:italic; background:#D8DABE; padding:5px; border:1px solid silver"]]
{$text}
[[/cell]]
[[/row]]
[[/table]]
[[/div]]

To include it in the page, use the same code as from the left – only change the word "left" to "right".

[[include include:video-right
|width=
|video=
|text=
]]

In action

If you write this:

[[include include:video-right
|width=400px
|video=<object width="400" height="250"><param name="movie" value="http://www.youtube.com/v/rPu5EbIXxLY?fs=1&amp;hl=es_ES"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rPu5EbIXxLY?fs=1&amp;hl=es_ES" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed></object>
|text=This is a video about many, biuuuutiful, funny cats.
]]

You will get this:

Adjustments

You can adjust colors according to your preferences.

You can omit the text row if you don't want to put any text. This can also be used for positioning of the video on the left or right side of the text.

The top margin should also be adjusted. This is the code that is okay at my site, but here I see that the video is a little bit higher than the text.

The parameter that should be adjusted is:

margin:0.5em 0em 0.4em 1.2em;

Author

Brunhilda Brunhilda . Please visit his/her userPage.

Related articles

Comments