On my project, I do not want to have a thumbnail on which we can click to get the video playing (using colorbox).. I would like to have a simple link with a text like "movie" or "trailer" (with a play arrow before) and when you click on it, you get the colorbox video playing.
I have made a patch to allow this... this is not exactly a final patch, this is only a proof of concept (which is fully working)
This patch is adding a new formatter called: "Colorbox Modal with link" and allow the use of a custom text for the link (the play arrow is added in all cases)

Description of what I have done:
1)I have duplicated the colorbox formatter (PlugIn/Field/FieldFormatter/Colorbox.php) and called it ColorboxLink.php... By doing this my "patch" can work alongside with this module. All the changes reside in this file.

2)In function settingsForm I have added a radio button with 2 options "Use thumbnail or text" and a textarea to customize the link text: "Link text to use if no thumbnail"

$element['use_thumb'] = [
      '#title' => $this->t('Use thumbnail or text'), 
      '#type' => 'radios', 
      '#options' => [
        'thumb'=>t('Use thumbnail'), 
        'link'=>t('Use link')
      ],
      '#default_value' => $this->getSetting('use_thumb')
    ];
    $element['link_text'] = [
      '#title' => $this->t('Link text to use if no thumbnail'),
      '#type' => 'textarea',
      '#default_value' => $this->getSetting('link_text')
    ];

3) I have adapted the function defaultSettings as well as the function settingsSummary()

public static function defaultSettings() {
    return Thumbnail::defaultSettings() + Video::defaultSettings() + [
      'modal_max_width' => '854',
      'use_thumb'=>'thumb',
      'link_text'=>'trailer'
    ];
  }
 public function settingsSummary() {
    ...//changes start here
    $usethumb=($this->getSetting('use_thumb')=='thumb');
    $use=$usethumb?$this->t('Use thumbnail.'):t('Use link');
    $summary[] = $use;
    if (!$usethumb){
      $summary[]=$this->t('Text:').$this->getSetting('link_text');
    }
    return $summary;
  }

4) and finally, I have updated the function viewElements to show the text link:

 public function viewElements(FieldItemListInterface $items, $langcode) {
    $element = [];
    if ($this->getSetting('use_thumb')=='thumb'){
      $thumbnails = $this->thumbnailFormatter->viewElements($items, $langcode);
    }else{
     //Here is the new code
      $thumbnails =array( array(
        '#markup' => '<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>&nbsp;'.$this->getSetting('link_text'),
      ));
    }
    ...

As you can see, I use a 2 classes to show a play arrow before the text: glyphicon glyphicon-play-circle This is working for my project because it is a bootstrap style which is used by my project.
Those class are defined like this in bootstrap:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../bootstrap/fonts/glyphicons-halflings-regular.eot');
  src: url('../bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-play-circle:before {
  content: "\e029";
}

Attached:
ColorboxLink.php: the new formater... if you don't want to use the patch, you can drop it into PlugIn/Field/FieldFormatter/
diff-ColorBox-vs-ColorBoxLink.patch: just for your info, the differences between Colorbox.php and ColorboxLink.php (do not use the patch)
video_embed_field-Allow_colorbox_on_Text-baud--8.x.patch: the "real" patch that will add the new formatter
New-ColorBoxLink-Formatter.png: some screen capt
=>In any case, you will need to add 2 css classes to show the play arrow before the text

I think that the best thing to do would be to merge ColorBox with ColorBoxLink: what do you think?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

DuneBL created an issue. See original summary.

Ankabout’s picture

This is awesome! I cannot comment on whether it belongs in here or how to proceed, but I have been trying to figure out how to do this, and will give it a try.

Update: Tried the patch, but unfortunately with no success. It still displayed the thumbnail. If you ever figured out how to do this in a different way, I'd be very interested.

jlballes’s picture

It works perfect!

sethfisher’s picture

I added the option to also use the Entity label as the Colorbox launch text. It's a new radio button "Use Entity label" between "Use thumbnail" and "Use default text" (changed from "Use link")

Here's a diff from the original patch on this issue, as well as a new patch with everything.

Status: Needs review » Needs work
sethfisher’s picture

Correct version of patch. Don't know what happened there.

nkoporec’s picture

Patch applies cleanly and it works.Thank you.

lhubbert’s picture

I have been searching for a solution to this for two weeks! The workaround I had in place was ugly. Thank you!

Works perfectly.

bwoods’s picture

Brilliant! I was resigned to having to rebuild this link with a basic link field and additional colorbox modules, but this works perfectly. Thank you for posting!

amit.drupal’s picture

Patch is looking good and working fine.
++ RTBC

tepelena’s picture

Thanks. This is a must-have feature.

Sam152’s picture

Status: Needs review » Closed (won't fix)

With the advent of Media in core, the Video Embed Field module has moved to being minimally maintained. Only issues which assist in the migration to Media in core will be committed. To read more about this decision, please see: #3089599: Maintenance status for Video Embed Field now that media is in core.