Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Embed YouTube Videos

Video loading...

  • 0:00
    ♪ music ♪
  • 0:02
    [Working with the Media Module in Drupal 7]
  • 0:04
    [with Addison Berry] [water drop sound]
  • 0:07
    So our band and their fans
  • 0:09
    have actually taken a lot of video
  • 0:12
    of various concerts and just hanging out
  • 0:14
    that they've done.
  • 0:16
    And they've always uploaded all their videos to YouTube.
  • 0:18
    It works great, it's a free service that they can use,
  • 0:21
    and people can share the videos and embed them in places,
  • 0:25
    and it's great.
  • 0:27
    And they want to keep using YouTube as the main place
  • 0:29
    where they store all the videos that they have,
  • 0:31
    but they also, of course, want to have those videos
  • 0:34
    on their website; it makes sense, right?
  • 0:37
    They would like people to be able to just find them and not have to go
  • 0:39
    off to YouTube and try figure out where they are over there.
  • 0:42
    So in this lesson we are going to create [repeated in onscreen text]
  • 0:45
    a video content type, and in the process
  • 0:49
    of getting our YouTube videos into that,
  • 0:51
    we're going to need to talk about remote media
  • 0:54
    because we're not going to upload the video to the website
  • 0:56
    itself, we want to use media
  • 0:58
    that has been uploaded somewhere else entirely.
  • 1:01
    So we're going to talk about what it means to use remote media
  • 1:04
    and—specifically with the media module—
  • 1:06
    the various plugins that are available
  • 1:09
    to let you access different kinds of remote media.
  • 1:12
    And then, we're going to go ahead
  • 1:14
    and build out our video content type
  • 1:16
    to pull in you YouTube videos
  • 1:19
    and embed those so we can see them on the site
  • 1:22
    without having to re-upload them
  • 1:25
    or mess around with any of that stuff. [water drop sound]
  • 1:28
    So before we dive in here, let's take a quick look
  • 1:30
    at what we're trying to build.
  • 1:32
    This is the video content type that we're going to be recreating.
  • 1:36
    So we have our title, our body,
  • 1:39
    standard stuff, and then we have this video field.
  • 1:43
    And again, we select Media;
  • 1:45
    it opens up our regular media browser that we've been using
  • 1:48
    throughout with the media module.
  • 1:50
    And we now have this tab called Web.
  • 1:53
    So instead of just having an upload field
  • 1:55
    and the existing library available,
  • 1:57
    we can now use things that are out on the web.
  • 2:00
    You'll see that it lists the providers that are supported.
  • 2:03
    So right now it is only YouTube,
  • 2:05
    but we could add others here like Flicker
  • 2:07
    and Vimeo and stuff like that.
  • 2:09
    And all I need to do is paste
  • 2:11
    in the URL for, say, a YouTube video page,
  • 2:14
    or grab the embed code for that video.
  • 2:17
    Paste it into here, and then when I've done all of that
  • 2:22
    we end up having this.
  • 2:24
    We get the actual video embedded in the node
  • 2:27
    along with our description and such, and then people
  • 2:29
    can just play the video from here rather than having to go over to YouTube.
  • 2:33
    Now, how are we going to do that, right?
  • 2:36
    Well, let's follow the trail of how we figure out
  • 2:38
    how we get the YouTube stuff working.
  • 2:41
    If we go back to the media project page,
  • 2:43
  • 2:46
    and if I scroll down, we've looked at this list before
  • 2:50
    earlier in this series,
  • 2:52
    there's a wiki page of media related modules
  • 2:54
    under the recommended modules section.
  • 2:56
    This is just a really great resource.
  • 3:00
    And so you should definitely— if you're working with media,
  • 3:02
    it's something to check in on regularly.
  • 3:04
    So let's go to that wiki page,
  • 3:06
    and when we get here, the very first section
  • 3:08
    is provider projects.
  • 3:10
    And so that means these are various media assets
  • 3:13
    that we can add to our site.
  • 3:16
    And you can see there is quite a list of all kinds
  • 3:18
    of different services that are available.
  • 3:20
    So I'm going to scroll down to the Ys
  • 3:23
    because I want to use YouTube.
  • 3:25
    So we click on the YouTube
  • 3:27
    and that takes us to the project page
  • 3:30
    for Media: YouTube module. []
  • 3:33
    This is the module that we're going to need
  • 3:35
    along with Medias: Internet Sources
  • 3:37
    in order to pull it all together
  • 3:40
    and make this embedding super simple like we just saw.
  • 3:43
    So you want to make sure that you download
  • 3:45
    Media: YouTube, and add that to your site.
  • 3:47
    And then let's go over here and actually enable some stuff.
  • 3:50
    So go to Modules,
  • 3:52
    and if I go down to the media section
  • 3:54
    you'll see I have the Media: YouTube,
  • 3:58
    and I will also need Media: Internet Sources.
  • 4:00
    So we're going to enable both of these modules to get YouTube embeds working.
  • 4:03
    Okay, so now that I have that, let's go create the content type.
  • 4:11
    Typical content type stuff, add content type.
  • 4:14
    We're going to create one called video.
  • 4:20
    And then I'm going to go down and save and add fields.
  • 4:25
    So again, we have the title and the body.
  • 4:27
    So we have those standard fields that we need.
  • 4:30
    I only need to add one additional field
  • 4:32
    to get the video embed going on in here.
  • 4:34
    So I'm going to go ahead and call this YouTube video
  • 4:37
    just to make it clear to people that it's going to be a YouTube video they're using.
  • 4:39
    If we had multiple providers, I could probably just do video
  • 4:44
    or embedded video or something like that.
  • 4:49
    Now when it comes to field type,
  • 4:51
    there are actually two ways that we can go about doing this.
  • 4:56
    You'll notice down here at the bottom, there is something called
  • 4:58
    multimedia asset deprecated.
  • 5:01
    So—and this is how you used to do this
  • 5:03
    was using a multimedia asset.
  • 5:06
    But as you can see, it's deprecated
  • 5:08
    It's sort of there for backwards compatibility
  • 5:10
    and for people who have already been using that.
  • 5:12
    So since this is new, we don't necessarily want to use something
  • 5:14
    that's deprecated and is being phased out essentially.
  • 5:17
    So we're just going to go straight and use—again—
  • 5:20
    the plain file field type and the widget
  • 5:22
    that we're going to use is—again— the media file selector,
  • 5:24
    our standard media browser, right?
  • 5:27
    We're going to use public files.
  • 5:30
    We're not actually uploading— since we're using a file field
  • 5:32
    it's going through all of the "you want to upload a file" thing,
  • 5:37
    but we're not going to use if for that; we're only going to use
  • 5:39
    the embed, so let me save that.
  • 5:42
    It's a video note, we should require that. Right?
  • 5:47
    It probably would be a good idea
  • 5:49
    to put some help text in here that explains to people
  • 5:51
    that they would use the web tab
  • 5:55
    and then use the embed code or something like that.
  • 5:58
    Now, allowed file extensions, again the default is just txt for text.
  • 6:03
    We are not going to be actually uploading files.
  • 6:08
    We're just going to be embedding them.
  • 6:10
    So honestly, this doesn't matter.
  • 6:12
    Now if you wanted to you could put in some video file formats there,
  • 6:16
    if that makes you feel better, but we're going to not use this.
  • 6:18
    We're going to ignore it, so what I'm more interested in
  • 6:22
    are these remote media types and URI schemes.
  • 6:25
    This is the important stuff.
  • 6:27
    Now, I don't want people to be able to use
  • 6:30
    images remotely. That would be, say, for something like Flickr, right?
  • 6:33
    I want people to be able to do video and nothing else.
  • 6:36
    I don't want audio. I don't want images.
  • 6:39
    I don't want anything else. I just want people to be able to use video here.
  • 6:43
    When it comes to the URI schemes, again,
  • 6:46
    I don't want people to upload to the private or public file directories
  • 6:50
    on the local site server.
  • 6:52
    I only want to be able to use YouTube videos from YouTube.
  • 6:57
    So this is the stream wrappers
  • 6:59
    that medial module is defining.
  • 7:03
    Again, file directory, this is all about uploading
  • 7:07
    and those don't really apply to us.
  • 7:09
    So I'm going to ignore those.
  • 7:11
    And we only want one video for post on this particular site.
  • 7:15
    So these can all stay the same as well.
  • 7:19
    So I have my field added.
  • 7:22
    So let's go ahead and just add a video,
  • 7:25
    and see how that works, so I'll go to add content
  • 7:28
    and video.
  • 7:31
    And I'll do a title here.
  • 7:38
    So I have my title and my body, which is yada, yada.
  • 7:42
    The important thing that we really want to look at here
  • 7:44
    is this YouTube video, so I'm going to select my media,
  • 7:47
    Again, I'm not uploading a file,
  • 7:49
    that's not going to work, but I have this new web tab,
  • 7:51
    and I just need to put in my URL or embed code.
  • 7:56
    So I'm going to go over and find a video.
  • 7:59
    And this is just on YouTube, and I can either
  • 8:03
    use the URL up in the address bar in my browser,
  • 8:06
    or I can use this share section under YouTube
  • 8:11
    and just grab this or could grab the entire embed code.
  • 8:15
    Either one of these is going to work.
  • 8:17
    So once I have that copied,
  • 8:20
    I go back to my site, and I just paste that code in here.
  • 8:24
    So that's what I got from there and submit.
  • 8:29
    And then I have my video here.
  • 8:32
    So let's go ahead and save this.
  • 8:36
    And you'll see, interestingly enough,
  • 8:39
    this is not displaying as the actual video embed yet.
  • 8:42
    And of course, as is typical, that means that we need
  • 8:45
    to do something with managing the display of our field.
  • 8:48
    We've just created the adding it thing,
  • 8:51
    the widget and such, but now we need to actually get that to display properly.
  • 8:55
    So I'm going to go back to Structure,
  • 8:57
    Content types,
  • 8:59
    and for video, I'll manage display.
  • 9:03
    We have our YouTube video;
  • 9:05
    so again, I don't need an actual label for it.
  • 9:09
    And by default, it's doing generic file,
  • 9:12
    which is just giving us that file link, not useful.
  • 9:16
    What I want to actually do is render this.
  • 9:21
    I want it to actually be turned into the HTML that it should be,
  • 9:25
    which is, in this case, going to be our embed code from YouTube.
  • 9:28
    So I'm going to change this to rendered file
  • 9:33
    and we'll just leave the view mode at default.
  • 9:36
    And then I'll go ahead and hit save.
  • 9:39
    And we should just check our teaser here real quickly too.
  • 9:43
    In the teaser, we probably don't necessarily need the video displaying,
  • 9:48
    but if I did want to have the video displaying in the teaser as well,
  • 9:52
    I would need to make sure I set the formats here, right.
  • 9:55
    But we have all this stuff set properly.
  • 9:57
    Let me close this.
  • 10:00
    Our page reloads, and now I have the embedded video.
  • 10:05
    And that was that simple; I just needed to enable two modules,
  • 10:10
    I added a video file field,
  • 10:12
    and instead of setting up the upload settings for it,
  • 10:15
    I just set the remote settings for it, that it's a video,
  • 10:19
    and it's using the YouTube URI,
  • 10:22
    and then I just needed to change the output to—
  • 10:25
    instead of just being a generic file link—
  • 10:28
    rendering it out and actually turning it into
  • 10:30
    the embedded video that we want to see.
  • 10:32
    Now one thing I kind of skipped over
  • 10:34
    because I just wanted to get to the meat of it with this video
  • 10:37
    is if you noticed our preview actually was a little messed up.
  • 10:40
    So if I go in and edit this node,
  • 10:43
    and go down here where I added the video,
  • 10:45
    you can see I'm seeing a preview of the video—
  • 10:48
    the video is actually embedded, and I can play that here—
  • 10:50
    but it's actually too large.
  • 10:53
    So the preview should be small, and I don't have access
  • 10:56
    to the buttons to remove this content or anything else.
  • 11:00
    So this is actually not very good right now.
  • 11:03
    Now, the reason for that is because by default
  • 11:06
    this is just embedding that YouTube video for me.
  • 11:10
    And what I want is for— when I'm in a preview mode—
  • 11:13
    which is like with this field this is a preview of the file I've uploaded,
  • 11:18
    I don't want to have the full embed.
  • 11:20
    I just want to have a little teeny preview image.
  • 11:22
    So what I'm going to do is go in and configure this
  • 11:26
    in the media file type
  • 11:28
    for videos, since this hasn't been set for me yet.
  • 11:31
    So if I go to Configuration,
  • 11:34
    and come down here to File types,
  • 11:36
    and we have our video file types,
  • 11:39
    I don't need to manage the fields on the video—
  • 11:42
    like the meta information—I need to manage the actual file display.
  • 11:46
    And if you come down and look,
  • 11:50
    you can see YouTube video is selected for this default display, right?
  • 11:54
    So when I did the rendered file
  • 11:56
    for my display of the field,
  • 11:58
    we just had default, and that works,
  • 12:01
    but if I go in and look at this preview mode,
  • 12:05
    that we have here; there's actually nothing selected.
  • 12:08
    And so it's just using the default, which is that really
  • 12:10
    large embed, which is not what I want.
  • 12:13
    But we do have this YouTube preview image we can use.
  • 12:17
    So if I do this, now I can select
  • 12:20
    the image style that I want to use just for a little preview image.
  • 12:24
    And we can use these square thumbnails
  • 12:26
    to make a nice small thumbnail.
  • 12:28
    So I'm going to change this to square thumbnail for preview,
  • 12:31
    and hit Save Configuration.
  • 12:34
    And now, if I go back here,
  • 12:37
    this is my node, that you can see
  • 12:39
    that the video is still normal big embed size.
  • 12:42
    But if I edit this, if we scroll down,
  • 12:45
    now I have a normal preview size in here,
  • 12:48
    and I can access my buttons.
  • 12:50
    So this is something that just— it's not set up by default
  • 12:53
    in this particular version.
  • 12:55
    So again, those file types that media provides
  • 12:57
    lets me control that display
  • 13:00
    in different view modes or different contexts.
  • 13:03
    And so that's how I get this working properly
  • 13:06
    so that people can do what they have to do on the editing side of things.
  • 13:11
    So we have now added our video to the site
  • 13:16
    and we can just embed away
  • 13:19
    with all the videos we want to be able to have.
  • 13:21
    [water drop sound] [drupalize me]

Embed YouTube Videos


Our band has been capturing stuff on videos for a while, and it's super easy for them to put them up on YouTube. YouTube has been perfect for them, and they want to keep using that, but they also want people to be able to find those videos on their site. In this lesson we'll create a new video content type and set it up to use remote media with the Media Internet Sources module, which comes with the Media package. When we add our video field to the content type we will not be configuring it for upload, which is what we used for the audio files on our albums. This configuration, with Media Internet Sources and the Media YouTube module, will allow our users to simply copy and paste in a YouTube URL or embed code to get a playable video on our site. In the process of working with the Media YouTube module, we'll also take our first dip into the Media file type display settings to make sure our video preview doesn't break our editing experience.

Note: This series is covering Media Module version 1.x. To learn about Media Module 2.x, check out our Using Drupal Chapter 4: Media Management series.

Log in or sign up to download companion files.