Demo of Drupal's Media: YouTube module

Share this

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!

Comments

sbobet's picture

agen ibcbet

I used to be very happy to discover this web-site. I needed to thank on your time for this excellent read!! I definitely enjoying each tiny little bit of it and I've you saved to my bookmarks to take a look at latest things you weblog post. agen bola Indonesia
bandar bola terpercaya
agen judi bola
download bola tangkas

rebornbsds's picture

Vasilkove- An Elite Black Hat SEO

vasilkov,vasilkove,v vasilkove,sayt goroda vasilkov,dfcbkmrjd,dfcbkmrsd,d dfcbkmrjdt,dfcbkmrjdt rjv,vasilkove com

Charles Janke's picture

A top new topic in this post

A top new topic in this post makes your site is greatly appreciated. This post you have made here could not be written any better potty training

Charles Janke's picture

It feels really valuable that

It feels really valuable that I can find what I've been searching through blogs to see the new tips, You definitely know what you were talking about and seem to have a very high interest on the topic carb nite solution pdf

David Carn's picture

Nice Post!

This is a great video!

Carl K. Eddy's picture

Must appreciate the great

Must appreciate the great posts you have written here, I was wondering how you could write down in details. Qualified post indeed. It's very helpful for writing this valuable information visual impact muscle building workout

Anonymous's picture

cheapest car insurance I am

cheapest car insurance
I am envisioning assessing new articles. Keep up the degree that this might be conceivable!

Anonymous's picture

After reading your article I

After reading your article I was impressed. You explain the topic very well. And I hope that all visitors think the same after reading your article. It is informative and I learned something I did not know.
rebelmouse.com/visualimpactforwomenreview

Anonymous's picture

I'm lucky I did in light of

I'm lucky I did in light of the way that now I've gotten a whole new point of view of this. Thankful to you! coleman stove
jessica simpson shoes

Kyle Howard's picture

Using this module now, thanks

Thanks, I am using this module now to add demonstrations to my Drupal based rtihelp.com website. Much more efficient than trying to get FFMPEG hosting and host my own videos.

sharon199's picture

Awesome information. I am

Awesome information. I am really surprised with this topic. Keep up the good work and post more here to read.
personal statement ucas

hulkersa's picture

Nice information, valuable

Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration.
creative writers

BorbsemsDrork's picture

Interesting Post!

Great Post! You have such a wonderful site here. The design is just perfect. Im glad that I paid a visit. Thank You!
______________________
http://www.aquashieldroofingcorp.com

BorbsemsDrork's picture

Interesting Post!

Great Post! You have such a wonderful site here. The design is just perfect. Im glad that I paid a visit. Thank You!
______________________
http://www.aquashieldroofingcorp.com

BorbsemsDrork's picture

Nice Blog!

Great Post! You have such a wonderful site here. The design is just perfect. Im glad that I paid a visit. Thank You!

BorbsemsDrork's picture

Nice Blog!

Great Post! You have such a wonderful site here. The design is just perfect. Im glad that I paid a visit. Thank You!

Click this Website's picture

This is a really good read

This is a really good read for me. Must agree that you are one of the coolest blogger I ever saw. Thanks for posting this useful information. Click this Website

Lorenz's picture

Thank you for the excellent work!

we are running several websites with the media module and this tutorial explained me how to customize some wysiwyg parts of the media module. Thanks!

Tabletki na odchudzanie's picture

Just tried to follow this

Just tried to follow this procedure with the latest 2.x-dev versions of Media, Media-Youtube, etc. I never see the YouTube tab in the Media Browser. Just the same old "Web" tab. And when I embed a YouTube video, it just puts the link into the Body of the article. I can play with File Types and get a preview image to be inserted, but I never seem to get the video itself. Seems like this is broken.

Dustin's picture

Video rendered as image

I am having the same issue as Tabletki na odchudzanie. I can add the YouTube video under the Web tab, but it is only displayed as an image.

I can create a new field in my content type and get the video to show correctly as well as change its display type.

I have tried to figure out how to get CKeditor to render the video, but I have had no luck.

Does anyone have a suggestion?

Mike's picture

No longer works?

Just tried to follow this procedure with the latest 2.x-dev versions of Media, Media-Youtube, etc. I never see the YouTube tab in the Media Browser. Just the same old "Web" tab. And when I embed a YouTube video, it just puts the link into the Body of the article. I can play with File Types and get a preview image to be inserted, but I never seem to get the video itself. Seems like this is broken.

Jeremy Sandow's picture

Hello Aaron, just finished

Hello Aaron, just finished watching the video and I must say that I'm impressed, which by the way doesn't happen that often. Thanks a lot and take care now

Natalia's picture

Media YouTube Quality

Hi Aaron!

I'm using media youtube module. Really like it. But I have a problem and I was wondering If you could help me.

I'm from Uruguay. Here there is a thing called OLPC (One laptop per child). It means that every child from any public school is given a laptop provided by the goverment.

I'm building educational site that provides learning videos for children that live far away from the cities.

The thing is that YouTube plays my videos on a 360p quality. And this quality doesn't work on the OLPC laptops, I need a lower quality by default. I can change it manually form the YouTube enbeded player. But this is not a solution. I need it to be by default.

I know this is not really related to the module and I'm sorry to bother you. But I've been searching arround for a week and nothing worked. May be you can give me some idea.

Thank you very much.

Anonymous's picture

Play Icon Not appearing as overlay on video thumbnail

Hello

I have a client who really wants the arrow head icon to overlay the video thumbnail in drupal using the media youtube module. I have configured drupals media gallery in which there is a mix of videos and images. My client wants a visual discrimination between the two media types. Do you know of any way to do that?

I'm going to implement the new video browser per your video. Thank you for doing this video, good job!

Thank you

Vinn Chan's picture

license

Hi,can I know that if I embed youtube player for business or commercial purpose, do I

need to pay. I can't find the pricing.

MXT's picture

GREAT!

Thank you for your work!!!

Roger Nyman's picture

Very informative. Thanks.

Very informative. Thanks.

S1L's picture

Youtube browsing from within Drupal

I love Media Youtube's ability to search and add Youtube videos from within Drupal.
I'm betting this would be a great feature for content editors with regard to photostock sites too. (Fotolia, iStockphoto, etc).

Thanks for the video!

John's picture

Cool

Media module is getting better and better! Thanks!

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.