How to Embed YouTube Videos in Drupal

Aug 8, 2016. | By: Henok Mikre

This is a short guide on how to setup oEmbed plugin so authors can easily embed YouTube videos. Since there are several ways of setting up WYSIWYG on Drupal 7, it can easily get confusing. This is much eaiser in Drupal 8 since WYSIWYG is part of core. In this guide, we will be using CKEditor for Drupal 7.

Prepare Requirements

We will install several modules and CKEditor plugins to get this working. Due to dependency issues, we will be using specific versions of each component.

Here is a table of requirements:

| Name      | Type            | Version   | Reason                  |
| --------- | --------------- | --------- | ----------------------- |
| ckeditor  | Drupal module   | 7.x-1.17  |                         |
| libraries | Drupal module   | latest    | used to declare plugins |
| ckeditor  | Drupal library  | 4.4       |                         |
| oEmbed    | CKEditor plugin | 1.17      | used to embed videos    |
| widget    | CKEditor plugin | 4.4.8     | dependency of oEmbed    |
| lineutils | CKEditor plugin | 4.4.8     | dependency of oEmbed    |

Download Modules and Plugins

# Download CKeditor module (current: 7.x-1.17):
drush dl ckeditor

# Download CKEditor library:
curl -LO http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.8/ckeditor_4.4.8_full.zip
unzip ckeditor_4.4.8_full.zip -d sites/all/libraries/
rm ckeditor_4.4.8_full.zip

oEmbed’s latest version (1.17) currently only works with CKeditor 4.4. That is why we downloaded CKEditor library 4.4.

# Download oEbmed widget.
curl -LO http://download.ckeditor.com/oembed/releases/oembed_1.17.zip
mkdir sites/all/libraries/ckeditor/plugins/oembed
unzip oembed_1.17.zip -d sites/all/libraries/ckeditor/plugins/oembed
rm oembed_1.17.zip

The current version of widget plugin (4.5.10) is not compatible with CKEditor 4.4, so we need to download widget version 4.4.8. If you don’t download the widget plugin, you will get an error like this:

Uncaught [CKEDITOR.resourceManager.load] Resource name "widget" was not found at "sites/all/libraries/ckeditor/plugins/widget/plugin.js?"
# Download widget plugin.
curl -LO http://download.ckeditor.com/widget/releases/widget_4.4.8.zip
unzip widget_4.4.8.zip -d sites/all/libraries/ckeditor/plugins/
rm widget_4.4.8.zip

# Download Line Utilities plugin.
curl -L http://download.ckeditor.com/lineutils/releases/lineutils_4.4.8.zip -o /tmp/lineutils_4.4.8.zip
unzip /tmp/lineutils_4.4.8.zip -d sites/all/libraries/ckeditor/plugins/

Enable Modules

# Download and enable the libraries module so our custom module can use it.
drush en -y libraries

# Enable CKeditor module:
drush en -y ckeditor

Declare Plugin

Now we need to tell CKEditor about the oEmbed plugin so that is available for us configure for our text format.

  • Create a custom module and add the following in the .module
/**
 * Implements hook_ckeditor_plugin().
 */
function drustrap_ckeditor_ckeditor_plugin() {
  $plugins = array();

  $plugins['oembed'] = array(
    'name' => 'oembed',
    'desc' => t('Embed external media via the <a href="http://ckeditor.com/addon/oembed">oEmbed plugin</a>.'),
    'path' => '/' . libraries_get_path('ckeditor') . '/plugins/oembed/',
    'buttons' => array(
      'oembed' => array('label' => 'oembed', 'icon' => 'icons/oembed.png'),
    ),
  );

  return $plugins;
}

Enable this custom module and continue.

Configure text format

  • Edit “Full HTML” profile at /admin/config/content/ckeditor/edit/Full
  • Enable “Embed external media via the oEmbed plugin”
  • Move “oembed” button from “Available buttons” to “Current toolbar”

You should now be able to embed a video:

CKEditor oEmbed

Also, remember to download the full CKEditor package. Otherwise, you will run into some issues. We had initially installed the “standard” version and had to switch to the “full” version. After having done that, we got the error Cannot read property 'ltr' of undefined in the console. We opened Chrome developer tools and clicked on “Disable cache (while DevTools is open)” to resolve it.

Make File

If you want to do this quickly, put the following in a .make file and run drush make:

; Drush Make API version
api = 2

; Drupal core version
core = 7.x

; Ignore Drupal core.
options[no-core] = TRUE

;*************************;
; Dependencies
;*************************;

; CKEditor module
projects[ckeditor][subdir] = contrib
projects[ckeditor][version] = 1.17

; CKEditor library
libraries[ckeditor][download][type] = get
libraries[ckeditor][download][url] = http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.8/ckeditor_4.4.8_full.zip
libraries[ckeditor][directory_name] = ckeditor
libraries[ckeditor][destination] = libraries

; oEmbed plugin
libraries[ckeditor_oembed][download][type] = file
libraries[ckeditor_oembed][download][url] = http://download.ckeditor.com/oembed/releases/oembed_1.17.zip
libraries[ckeditor_oembed][directory_name] = oembed
libraries[ckeditor_oembed][destination] = libraries/ckeditor/plugins

; Widget plugin
libraries[ckeditor_widget][download][type] = file
libraries[ckeditor_widget][download][url] = http://download.ckeditor.com/widget/releases/widget_4.4.8.zip
libraries[ckeditor_widget][directory_name] = widget
libraries[ckeditor_widget][destination] = libraries/ckeditor/plugins

; Line Utilities plugin
libraries[ckeditor_lineutils][download][type] = file
libraries[ckeditor_lineutils][download][url] = http://download.ckeditor.com/lineutils/releases/lineutils_4.4.8.zip
libraries[ckeditor_lineutils][directory_name] = lineutils
libraries[ckeditor_lineutils][destination] = libraries/ckeditor/plugins

Resources

  • https://www.drupal.org/node/1032208
  • http://bitcookie.com/blog/drupal-ckeditor-setup-development-tutorial
  • http://www.learn-drupal.in/ckeditor-2/drupal-ckeditor-wysiwyg-html-editor.html
  • http://drupal.stackexchange.com/questions/61211/alternatives-to-media-module
  • https://dev.ckeditor.com/ticket/9965

Subscribe

Subscribe to this blog via RSS.

Recent Posts

About

BLEN Corp is a small, minority, and veteran-owned information technology firm located in Washington D.C. Since 2004, we have been ahead of the curve in early adaption and implementation of cutting edge technologies including web and mobile development, service-oriented architecture, and other innovative web based solutions. Look at some of our projects.

Social Links

Our Bunker

WeWork Wonder Bread Factory
641 S St. NW
3rd Floor
Washington, DC 20001
United States.