2

In my Redactor field, I'd like to programmatically wrap all Youtube videos that have been added through Redactor's video plugin with Bootstrap's responsive embed classes. This answers how to add a single class, but Bootstrap requires multiple classes to be added to the wrapper.

4

In order to add multiple classes to a video added through Redactor, I'm using the Retcon plugin. This is my solution:

{{ entry.body | retconWrap('iframe', 'div.embed-responsive') | retconAttr( 'div.embed-responsive', { 'class' : 'embed-responsive-16by9' }, false ) }}

There are two Retcon filters applied here. The first filter retconWrap wraps matching selectors in whatever you want. In this case, I'm looking for an iframe and wrapping it in 'div.embed-reponsive':

retconWrap('iframe', 'div.embed-responsive')

The second filter, retconAttr, looks for 'div.embed-responsive' (the wrapper you just applied) and applies any additional classes. The "false" indicates that you do not want to destroy any existing classes, just concatenate them:

retconAttr( 'div.embed-responsive', { 'class' : 'embed-responsive-16by9' }, false )

This may not be the most elegant solution, but it works. Frankly, I feel like we should be able to pass multiple classes through the retconWrap filter, but I've tried and it doesn't work.

1

I've been experiencing a similar problem. I originally handled it with Javascript, but this would only apply the classes I needed after the DOM was loaded.

I've gone for an approach that extends existing functionality of the Redactor video plugin. The risk is that future updates to Redactor could break the video plugin. The benefit is that this will make the modifications before the entry is saved. No need for Retcon and no front-end Javascript frigs.

Create a 'video-wrapper.js' file in your '/config/redactor/plugins' directory and copy the following into it:

try {
      if ( $R.classes['video.component'] ) {
        $R.classes['video.component'].prototype._init = function(el) {
          if (typeof el !== 'undefined') {

            var $node = $R.dom(el);

            // Just a standard jQuery wrapper
            $node.wrap('<div class="embed-responsive embed-responsive-16by9"></video-container>');

            var $wrapper = $node.closest('figure');
            $wrapper.addClass('')

            if ($wrapper.length !== 0) {
              this.parse($wrapper);
            } else {
              this.parse('<figure>');
              this.append(el);
            }

            // Uncomment this if you want to remove the <figure> element
            // $wrapper.unwrap('<figure></figure>');

          }
          else {
            this.parse('<figure>');
          }

          this._initWrapper();
        }
      }
    }
    catch(error) {
      console.error(error);
    }

To enable the new plugin, you'll need to update your desired Redactor config file with:

"plugins": ["video-wrapper", "video"]

The changes will only effect new videos added via a Redactor field.

I know this answer is little late, but I hope helps non-the-less.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.