[SOLVED][Drupal Colorbox][Drupal Views] How to launch a video embedded in a View in Colorbox using Video.js?

| | 2 min read

Many Drupal users wanted to know how to launch a video thumbnail embedded in a View in Colorbox using Video.js. If you are facing the same question in your Drupal website with Colorbox and Views then read on to find out the solution.

Follow the steps below to launch a video in Colorbox using Video.js

  • Ensure you have the following 3 modules installed and enabled on your Drupal site.
  • First you have to create a content type to contain the data
  • Next add a field to hold both the actual video file and the thumbnail
  • Also add the data types that the field will use (eg mp4 for the video and jpg for the image)
  • Set the number of uploads to 5.
  • After that set "Manage Display" format to "Video.js"
  • Next add an extra image field to hold the images for the View. (This is the image we use to launch Colorbox when clicked)
  • Leave the "Manage Display" format as default (image)
  • After saving everything you will have a content type with a video file field and video thumbnail field
  • You should proceed to create a few Videos
  • Now we need to create the View
  • Add the video field and video thumbnail field to the View but exclude them both from display.
  • Next set the formatter for the " Video file" to "Video.js : HTML 5 Video Player"
  • Next set the formatter for the "Thumbnail file" to "Image" and image style to "thumbnail"
  • Now we should add the Colorbox trigger.
  • Set the trigger field to the thumbnail image and add the replacement token for the popup field which should be available in the View
  • Save the changes and you will have the Videos coming out in the Colorbox popup with the HTML 5 Video player.

Hope that helps.

The easiest way to solve a Drupal issue is to hand it to the Drupal experts. We can provide a wide range of Drupal services to help you maintain and manage your Drupal websites. Get in touch with us to know more.