closed captioned video

Demo of Drupal's Media: YouTube module

Submitted by aaron on Fri, 2012-05-18 15:50

The following transcript is for the video at http://www.youtube.com/watch?v=XfPKKisE88w :

Hello, my name is Aaron Winborn. I am a developer for Advomatic, the author of Drupal Multimedia, and a contributor and a co-maintainer of several Drupal modules, including the Media suite of modules.

Today, I will demonstrate a new feature of the Media: YouTube module: browsing and searching videos directly from YouTube, in the media browser itself. So first, let’s set up our environment.

We are assuming that you already know how to install Drupal. If not, you can find information at Drupal.org.

So right now we are at the modules administration page. We are interested in the modules under the Media package. You will need to install and enable the File Entity module (version 7.x-2.x), and the same version of the Media module.

We will not enable the included Media Field module; it is there for legacy purposes, and has been deprecated in favor of core’s File Field.

The Media Internet Sources module, included with the Media module, is a dependency of the Media: YouTube module, so we will enable that.

Next will be the Media: YouTube module, also version 7.x-2.x.

Finally, we will install the WYSIWYG module.

Let’s start by configuring WYSIWYG. We do that by going to Configuration > Content Authoring > WYSIWYG profiles. Note that I have also installed and enabled the Admin Menu module and the Admin Menu Toolbar module, which gives us the fancy drop-down menus for administration that you see here.

Now in order to use WYSIWYG, you need to have also installed a third-party WYSIWYG library, such as CKEditor or TinyMCE. You need to follow the instructions with the WYSIWYG module to install that, although it is quite simple actually. You just download and unpack the file into the sites/all/libraries folder. You can see that I am using CKEditor here.

The WYSIWYG module allows us to set up profiles for the various text formats on our site; in this demo, we will edit the Filtered HTML format.

Open up the buttons and plug-ins field set next. Then check the Media Browser check box. That will add the media browser button to our WYSIWYG editor, which we will see soon.

In order to use that however, we need to configure the filter in question. In fact, I believe that if we do not do this step 1st, we will get an error message, complete with a link to the format configuration page.

On this page, we need to check the box next to “Convert Media tags to markup”. That is the answer to the number 1 support question that we get in the Media queue, which is, “Why is there bracketed goobly gook instead of my images?”

So now, as we will see, everything should be working now. So let’s test it.

Here on the create article page, we see a fancy button on the body text area! Let’s click it.

And there we go.

These are thumbnails being pulled directly from YouTube. How about that?

And there is even a ghetto pager, or at least previous/next links.

And you can also search YouTube directly from our browser.

So now we will select a video and submit it. Add a title and save the node. And there we go.

And that’s it really. Well, almost.

There are some more settings, specifically here to control which tabs show up for WYSIWYG. Note that at the time of this demonstration, you will not have this functionality unless you install the patch over at node 1434118.

To complete the demo, we will also do the same for fields. Let’s add a field to hold YouTube videos. We will call it Media, and it will be a file field with a Media file selector widget.

Here, let’s reorder it as well for the demo.

We leave everything at their default settings.

Hold on, I forgot that we need to allow the YouTube URI scheme. And the video file type.

So now we will create a new article, and select the media.

And here we have all the tabs available to our browser, including the new and improved YouTube tab.

And also, let us look at another new feature of the media module: My files!

This has been a long-awaited feature for the Media module as well.

Now here comes the 2nd most asked question in the support queue: “How come there is a link to my file, rather than the file itself?”

Let’s just fix that now.

Now we are in the file type administration page, where we can configure the display for each of our file types. Note that we can also add fields to our files, although we are not going to do that in this demo.

We will jump to the video display...

No, we want to make sure that our large formatter is set up properly for YouTube. And it is, so let’s set up that as the formatter for our Media file field.

And there it is, as a generic file, which is simply a link to the file stream itself. We will change that to rendered file. And then we set the view mode to large.

While we are in there, we can do the same for our teasers. We will just set that to the preview view mode, which by default will display a thumbnail.

Whoops, I forgot to save it. Let’s just do that again.

And there is the video.

And there is the thumbnail.

Well done!

Syndicate content

The Society for Venturism has chosen me as the recipient of its charity for this year, to hopefully offer me cryonic preservation when the time comes. And this month, Longecity, an excellent forum for the discussion of issues related to extending the lifespan of humans, has offered up a matching grant of up to a thousand dollars to help out! So help out! Please.