Drupal Technical

[Drupal] How to display the thumbnail images of the videos uploaded from vimeo/youtube in a Drupal site?

Varokky.jose | | 2 min read

Suppose you have to display the thumbnail image of each video uploaded in a content and while clicking on the thumbnail the corresponding video should be loaded in the page. This can be done by embedding the video in page and implementing jquery function to load video.If you are not sure how to display the thumbnail images of the videos uploaded from vimeo/youtube in Drupal then read on.

Suppose a content type can handle vimeo,youtube and images.We can check whether the video is vimeo,youtube and then display the video in the page using iframe tag.

Example:

$node is the node object.



if ($node->..['und'][0]['file']->filemime == 'video/vimeo') {

  $video = <iframe width="425" height="425" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen=""  src="http://player.vimeo.com/video/'.end(explode('/', $node->..['und'][0]['file']->uri)).'" id="video_frame" ></iframe >

}

elseif ($node->..['und'][0]['file']->filemime == 'video/youtube') {

  $video = <iframe width="425" height="425" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://www.youtube.com/'.end(explode(':', $node->field_amb_gallery['und'][0]['file']->uri)).'" id="video_frame" ></iframe>;

}

When video is uploaded (using media_vimeo/media_youtube module) corresponding image is stored in sites/default/files/media-vimeo or sites/default/files/media-youtube folder.

Thumbnail of image can be displayed using img tag and the jquery function can be called in the onclick attribute of img tag.

Example:

Here video is the name of the video and filename is the name of the image stored in media-vimeo/media-youtube folder. 



if (vimeo_video) {

 <img onclick=function_name(video, vimeo) src='/sites/default/files/media-vimeo/filename' /></li>

}

elseif(youtube_video) {

 <img onclick=function_name(video, youtube) src='/sites/default/files/media-youtube/filename' /></li>

}

Jquery function can be implemented for loading the image and can be called in the onclick attribute of image tag.This function checks the type and set the html iframe for a particular class.



function function_name(video,type) {

  if (type == 'vimeo') {

	  $('classname').html('<iframe width="425" height="425" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://player.vimeo.com/'+video+'" id="video_frame"></iframe>');

  }

   else if (type == 'youtube') {

	  $('classname').html('<iframe width="425" height="425" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="http://www.youtube.com/'+video+'" id="video_frame"></iframe>');

  }

}

This will play the video when clicked on the thumbnail icon for the video.

 

 

Related Topics