Posted by Brunhilda on 07 Feb 2011 15:06, last edited by Helmut_pdorf on 04 Sep 2015 07:56
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&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&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&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&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:
This is a video about many, biuuuutiful, funny cats. |
lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla bla lorem ipsum bla
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. Please visit his/her userPage.
Hi All,
Having some difficulties getting the layout for the video correct. I've followed these instructions and my video is displaying on the screen i wish it to. The only issue is the width of the video which i'm unsure on where / how to change. I'm sure there is a really simple way, i'm just struggling to do it at the moment.
Here is the example page:
http://pwsuppliersupport.wikidot.com/videos
Here is the code entered:
[[include include:video-left
|width=854px
|video=<iframe width="854" height="510" src="//www.youtube.com/embed/Gms5YnDi_tc" frameborder="0" allowfullscreen></iframe>
|text= Favourites
]]
And why is it not possibe to make the window smaller?
like
[[include include:video-left
|width=760px
|video=<iframe width="760" height="480" src="//www.youtube.com/embed/Gms5YnDi_tc" frameborder="0" allowfullscreen></iframe>
|text= Favourites
]]
of course - I had to adjust the height in teh same relation - could be it is wrong…
Have a look on the try - wiki: http://try.wikidot.com/youtube-video-with-different-width
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
Thanks Helmut, you're right as always :)
Appreciate your help.
I made a short calculation: 854 / 510 = relation of 1,675
new width of 760 / 1,675 = new heigt 0f 453 ( ~ 454 ? )
My 1. calculation was wrong… with 480 instead of 454
Edit :
I hd a look n your video now - woth ths calculation:
700 / 1,675 = 417 ( not 450 as now ) .
But this is more an optical question..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I get here a little late, but the size of the video is obtained in the very same YouTube site. You can choose there which size you want before obtaining the code.
If slaughterhouses had glass walls, everyone would be vegan. - Paul McCartney