The Beginner’s Tutorial for Drupal Video Embedding

Embedding video in a web page is great to explain everything in a vivid manner. As thus, the discussion on how to embed video in the web page has become a big concern of most Drupal site owners. This beginner’s tutorial is made to the point and introduces the way to deal with this situation with the help of Video Embed Field module.

Video Embed Field module enables a custom type of field named as Video Embed on your Drupal backend. That allows an easy manner for you to insert videos from video-sharing sites, like Vimeo and Youtube, into article content type. Since all videos have been uploaded, each comes with its own thumbnail that is displayed on website front-end clearly.

Embed Videos in Drupal with Video Embed Field

After having a brief understanding of the Video Embed Field module, you should get started to install and enable this module on your Drupal site. Before everything, download Video Embed Field from Drupal.org. Log into Drupal admin panel and go to Modules tab shown on the top menu bar. Click “Install new module” and upload the module file you have downloaded just now. Click “Install” button.

Install Video Field Embed Module

To have the installation completed, you are required to enable this new module on your website by clicking the link “Enable newly added modules”. Scroll to this module and check the “Enabled” box beside it. Finally, click “Save Configuration” to confirm all settings.

Stay on your Drupal admin panel and go to Structure > Content Types. This is where to manage all content types on your website, like basic page. A list of existing content types and the Article content type is selected here. Click “manage fields” that is available for Article content type and here comes to the Article setting mode.

Focus on an array of settings under “Add new field” and name this new field as “Video”. Select Video Embed from the drop-down list for a selection of field type and then select Video from a collection of widgets. Leave the rest default settings and then click “Save” button.

Article Content Type

Go to Content > Add Content > Article and a field is ready for you to type a Video URL. You should access to YouTube or Vimeo to search for a video and then copy & paste the video URL in the blank. Here, we are going to embed a video from YouTube.

Embed Video URL

Since there is a YouTube player comes out automatically and that shows the newly added video, you have successfully embedded a video in Drupal. If there is a need to change the appearance of the video player, go to Structure > Content types > manage display and focus on the Video from a list of fields. Select “Thumbnail Preview w/Colorbox” option from the drop-down list and that shows the embedded video in a Colorbox popup.

Embed Video in Drupal Manually

There is another way to achieve the same goal, namely, manually embedding video in Drupal without using a module. Two methods are mentioned as below.

Method 1: Log into Drupal admin panel and “Edit” a page or block where to insert a video. Here, we take an existing page as an example. Access to Content tab and open an edit page as planned. Click “Add Media” under the Body section and this is where to upload image, embed URL and insert something from library.

Click the “Embed from URL” tab and paste the URL of any video you plan to embed. Copy the video URL from YouTube or Vimeo and then paste it to this blank. Click “Submit” to make it into effect. You can also insert an image via “Upload Image” tab or upload an existing media file from computer.

Embed from URL

And then, select a format when prompted and submit the settings again. A thumbnail for this newly added video is generated and shown in the editor.

Method 2: This is the most convenient way for embedding a video in Drupal. Although it is lacking in flexibility, this method makes a big difference on embedding video in a certain post. Search for a video from YouTube and click “Share” button. Copy the video source code via Embed tab and that should be enclosed by <iframe> code tag.

Copy Video Source Code

Go to Drupal admin panel > Content > Add Content and select Full HTML from the text format drop-down list. Paste the source code to the Body section and then preview it on the editor. The video should be shown like the following example. Finally, click “Save” button to confirm all settings.

Insert Video Source Code