YouTube video list with viewer

Topics: Controls
Apr 27, 2011 at 11:35 PM
Edited Apr 27, 2011 at 11:50 PM

I've made a start on a video list with viewer extension for BE 2 to show YouTube videos.

The bare bones can be seen here

Is this of interest to anyone?

It's just the basics with no styling as yet. I plan to use it for pages, but it could easily be made to work with posts as well.

If JavaScript is disabled you just get links to the videos (most folks using BE should have JS enabled).

Suggestions welcome.


Forgot to mention, current options are video width, height, border, full screen.

To use, insertion is in the usual format.

[ytg:videoId:link description] wherever you want links to appear - typically in a list.

Apr 30, 2011 at 3:43 PM

COOL! I see immediate use for this!


Apr 30, 2011 at 4:08 PM
Edited Apr 30, 2011 at 4:21 PM

I've added a button to the tinyMCE editor that makes it quite simple to assemble and edit galleries, it fires up a dialog box and prompts for details and inserts all the placeholders.

The extension then simply swaps out the placeholders with the necessary code, I'll post it later or maybe tomorrow along with instructions.

I set it up this way so as to give maximum flexibility when constructing the gallery layout, but if you have any ideas on making it simpler or think of anything else that might be useful, let me know.

I'm using it on pages, will you need it to work with posts?

If so I'll make the alteration.


May 1, 2011 at 6:20 AM

Actually I was thinking of something as shown in the video interviews. Now however I got sooo many ideas from the other pages that I am trying to get a hold of my mind running wild, my head feels like a wild spinning HDD. (LOL)

So I guess I start with the layout as you showed on that interviews page. The main reason being that this can be SEO optimized by both videos and text.


May 1, 2011 at 10:13 AM

Now you have me thinking about whether or not to include a text description option and how to lay that out, it makes sense to have just one view-port for a collection of videos, but a description of each in addition to a link would be good (but possibly messy).

The interview format is easy enough and for that you might be best using the extensions by JM Alarcon for both YouTube and Vimeo videos, based on Al Bsharah's extensions but supporting playback on mobile devices (really quite important now since everything has gone mobile).

These extensions use new embed code via an iFrame that detects device support and serves up flash or HTML 5 video ( iPads, iPhones etc. ). If you use this I would recommend that you add the parameter ?wmode=transparent to the code, this prevents the videos from obscuring other content such as drop down menus and such like, more info here (

The only drawback with the new embed code is that Google/YouTube are still experimenting with the API, so for now there's a limit on what you can do other than inserting the video and clicking play (otherwise you could retrieve all manner of additional info and that's restricting what I'm trying to do with the gallery as well).

So for now as regards the interview format, your kind of stuck with inserting the video placeholder and manually typing the description (which may well be what you want) and style accordingly with CSS.

I made myself a tinyMCE editor button for JM's extensions that handles the placeholder insertion and can post this, I'll write up some instructions for the viewer/link list and for adding the buttons.

There is a tremendous amount of layout flexibility using placeholders, but it does involve knowing some HTML, CSS and dealing with the peculiarities of the tinyMCE editor.

For a hands free approach, you could decide on a specific format and have the extension do all the work, but then you lose the flexibility.

An official media gallery would be nice, maybe when the BE guys have done their days work, attend to family responsibilities, get through answering forum questions, finish writing the next version of BE, swim the Atlantic for charity etc :)

In the meantime I'll give the extension some more thought and see what happens with the Google/YouTube API.


May 1, 2011 at 8:20 PM


I'm going to play around with this a little more, the tinyMCE editor is problematic with any insertions, it insists on wrapping everything in p tags, stripping out empty tags etc.

I'll modify the button that I made for JM's extension so that the popup dialog gives the option to add a header and description and will then write the whole code block.

I'm thinking that for constructing pages it would be good to make up an HTML code template (with placeholders) that you can drop in to HTML view.

The editor respects markup like this



Then in WYSIWYG mode you would just highlight the ph wherever it happens to be and click the video button.


May 6, 2011 at 11:46 PM

Video gallery update, 

Things are progressing nicely with the video gallery extension, the button that gets added to the tinyMCE pretty much builds the gallery for you for you.

New links can be cut and pasted from YouTube or Vimeo to a popup dialog and insertion is automatic, video format detection is also automatic.

I am working on support for other media formats and some other ideas, will either post shortly as a version 1 with 2 to follow or just hold off and post in a oner.