VideoJS within a colorbox.

You should have a look to Colorbox module.

I'm struggling with the same issue. I have checked out all the documentation I could get my hands on and have not been able to figure it out either.

Could anyone help us out?

Thanks!

seems to me the above could have been accomplished using the videojs.tpl.php file as well.

I would be interested to know how to accomplish the above using the videojs.tpl.php file -- could be neater.

by copying the tpl.php file to your theme and adding the necessary class to the HTML that is required by colorbox to do it's thing.

I no longer utilize this module to test and be more specific. Thus some trial and error may be fruitful.

I was playing with this today. In the end, I created a custom tpl.php file and when the file field is out put, I wrapped it in an extra div with a class of 'hide-video'. Code is a little like this:

      hide($content['field_file_video']);
      print render($content);
      print '<div class="hide-video">';
      print render($content['field_file_video']);
      print '</div><!-- end .hide-video -->';

The class is defined as follows:

/* stop the video from being displayed so that it can appear in a colorbox */
.hide-video .video-js-box { height: 0px; overflow: hidden; }

Setting it to display:none; was causing some issues once the video was pulled into the colorbox, whereas doing it this way has worked OK so far.

I then created a link to show the video in a colorbox, as follows:

<a href="?width=460&height=260&inline=true#ID_OF_VIDEO" title="THIS TEXT DISPLAYS IN THE COLORBOX" class="colorbox-inline">Click met to pop up video</a>

As per the Colorbox docs, you need to have "load inline content in a colorbox" enabled (so that the class 'colorbox-inline' works).

When you view the page, the video is hidden. Clicking the link shows it in a colorbox. Best of all, if you pause the vid, close the colorbox, then click the colorbox link again, the video is still paused where you left it. nice.

Hope this serves as a starting point to anyone having similar problems.

Carl --

Thank you for sharing your technique. How did you name your tpl file and where did you place it?

i came to a solution for two problem:
multiple different files in video.js and video.js inside colorbox.
When there is only one video, show embed, when there is multiple video show link with colorbox, as Carl suggest. In theme template videojs.tpl.php:

$attrs = '';
if (!empty($autoplay)) {
  $attrs .= ' autoplay="autoplay"';
}
if (!empty($poster)) {
  $attrs .= ' poster="'. check_plain($poster) .'"';
}

if (!empty($items)): ?>
	<?php if (count($items)>1){ ?>
		<?php foreach ($items as $index=>$item): ?>
		<div class="video-js-box">
		<video id="<?php print $player_id."-video-".$index; ?>" data-setup="{}" class="video-js vjs-default-skin" width="<?php print($width) ?>" height="<?php print($height) ?>" controls="controls" preload="auto"<?php echo $attrs; ?>>
		  <source src="<?php print check_plain(file_create_url($item['uri'])) ?>" type="<?php print check_plain($item['videotype']) ?>" />
		</video>
		</div>
		<div class="video-js-link">
		<a href="?width=<?php print($width+30) ?>&height=<?php print($height+30) ?>&inline=true#<?php print $player_id."-video-".$index; ?>" title="<?php print check_plain($item['videotype']) ?>" class="colorbox-inline">
		<?php if (!empty($item['description'])) print $item['description']; else print "View video"; ?>
		</a>
		</div>
		<?php endforeach; ?>
	<?php } else{ ?>
		<video id="<?php print $player_id; ?>-video-<?php print $index; ?>" data-setup="{}" class="video-js vjs-default-skin" width="<?php print($width) ?>" height="<?php print($height) ?>" controls="controls" preload="auto"<?php echo $attrs; ?>>
		<?php foreach ($items as $index=>$item): ?>
		  <source src="<?php print check_plain(file_create_url($item['uri'])) ?>" type="<?php print check_plain($item['videotype']) ?>" />
		<?php endforeach; ?>
		</video>
	<?php }?>
<?php endif;

and in style.css:
.video-js-box { height: 0px; overflow: hidden; }