Greyhead.net

This is the "not really a form" recipe in this article, it just opens a little door to some of the other, more unexpected, capabilities of ChronoForms.

For the most part Joomla! protects the content you can display on your pages; it's easy to show HTML + CSS formatted content, more difficult to show PHP and JavaScript. There are many modules, plug-ins and extensions that can help with this but if you have ChronoForms installed then it may be able to help.

This is the "not really a form" recipe in this article, it just opens a little door to some of the other, more unexpected, capabilities of ChronoForms.

For the most part Joomla! protects the content you can display on your pages; it's easy to show HTML + CSS formatted content, more difficult to show PHP and JavaScript. There are many modules, plug-ins and extensions that can help with this but if you have ChronoForms installed then it may be able to help.

ChronoForms is designed to show pages that use HTML, CSS, PHP, and JavaScript working together. Most often the pages created are forms but nothing actually requires that any form inputs are included so we can add any code that we like.

ChronoForms will wrap our code inside <form>. . .</form> tags which means that we can't embed a form (why would we want to?), but otherwise most things are possible.

Getting ready

You will need the ID of the YouTube video that you want to display. We're going to use a video from a conference at Ashridge Business School, but any video will work in essentially the same way.

This recipe was developed for this particular video to force display of the HD version. At that time HD was a new option on YouTube and was not readily accessible as it is now.

How to do it...

1. Find the video you want on YouTube and look for the links boxes in the right hand column. Here we've clicked on the "customize" icon – the little gear wheel – to open up the options menu.
   

   

2. When you've set the options you want copy the code from the Embed box. Here is the code from this video with some added line breaks for clarity:
   

   <object width="425" height="344">
   <param name="movie"
     value="http://www.youtube.com/v/2Ok1SFnMS4E&hl=en_GB&fs=1&">
   </param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/2Ok1SFnMS4E&hl=en_GB&fs=1&"
     type="application/x-shockwave-flash" allowscriptaccess="always"
     allowfullscreen="true" width="425" height="344">
   </embed>
   </object>

3. To create a good looking page, we are going to add some HTML before and after this snippet:
   

   <h3>Video Postcards from the Edge</h3>
   <div>The video of the 2008 AMOC Conference</div>
   <div style='margin:6px; padding:0px; border:6px solid silver;
   width:425px;'>
   <object width="425" height="344">
   <param name="movie" value="http://www.youtube.com/v/2Ok1SFnMS4E&hl
     =en&fs=1&ap=%2526fmt%3D18"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/2Ok1SFnMS4E&hl=en&fs
     =1&ap=%2526fmt%3D18" type="application/x-shockwave-flash"
     allowscriptaccess="always" allowfullscreen="true" width="425"
     height="344"></embed></object>
   </div>
   <div>Some more text . . .</div>

   If you look closely, you'll see that there is also a new parameter in the URL –ap=%2526fmt%3D18 – which is there to force the HD version of the video to be used.

4. Paste this code into the Form HTML box of a new form, save, and publish it.
   

   

   Of course, it would be entirely possible to embed the video and to add form inputs in the same page, maybe to ask for comments or reviews.

How it works...

Very simply ChronoForms allows you to embed scripts into the page HTML that are not permitted in standard Joomla! articles.

---

There are different styles of laying out both JavaScript and PHP and sometimes fierce debates about where line breaks and spaces should go. We've adopted a style here that is hopefully fairly clear, reasonably compact, and more or less the same for both JavaScript and PHP. If it's not the style you are accustomed to, then we're sorry.