<p>In order to add multiple classes to a video added through Redactor, I'm using the <a href="https://github.com/mmikkel/Retcon-Craft" rel="nofollow noreferrer">Retcon plugin</a>. This is my solution:</p>

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

<p>There are two Retcon filters applied here. The first filter <a href="https://github.com/mmikkel/Retcon-Craft/wiki/Wrap" rel="nofollow noreferrer">retconWrap</a> wraps matching selectors in whatever you want. In this case, I'm looking for an iframe and wrapping it in 'div.embed-reponsive':</p>

<pre><code>retconWrap('iframe', 'div.embed-responsive')
</code></pre>

<p>The second filter, <a href="https://github.com/mmikkel/Retcon-Craft/wiki/Attr" rel="nofollow noreferrer">retconAttr</a>, 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:</p>

<pre><code>retconAttr( 'div.embed-responsive', { 'class' : 'embed-responsive-16by9' }, false )
</code></pre>

<p>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.</p>

CC BY-SA 4.0
2018-09-18T21:54:36.370Z
2018-09-18T21:54:36.370Z
Vaughn D. Taylor
<p>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.</p>

<p>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. </p>

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

<pre class="lang-js prettyprint-override"><code>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('&lt;div class="embed-responsive embed-responsive-16by9"&gt;&lt;/video-container&gt;');

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

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

            // Uncomment this if you want to remove the &lt;figure&gt; element
            // $wrapper.unwrap('&lt;figure&gt;&lt;/figure&gt;');

          }
          else {
            this.parse('&lt;figure&gt;');
          }

          this._initWrapper();
        }
      }
    }
    catch(error) {
      console.error(error);
    }
</code></pre>

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

<pre><code>"plugins": ["video-wrapper", "video"]
</code></pre>

<p>The changes will only effect new videos added via a Redactor field. </p>

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

CC BY-SA 4.0
2024-01-10T11:47:24.827Z
Hey Mark, would you mind sharing the CSS that accompanies that JS? Thanks
Mark
CC BY-SA 4.0
2019-10-09T11:15:50.487Z
2019-10-09T11:15:50.487Z
Mark Notton
<p>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. <a href="https://craftcms.stackexchange.com/questions/17058/if-youtube-in-redactor-then-wrap-in-div/17062">This answers</a> how to add a single class, but Bootstrap <a href="https://getbootstrap.com/docs/4.1/utilities/embed/" rel="nofollow noreferrer">requires multiple classes</a> to be added to the wrapper.</p>

<redactor><classes>
How do I wrap my Youtube video from a Redactor field with Bootstrap's responsive classes?
# How do I wrap my Youtube video from a Redactor field with Bootstrap's responsive classes?

(Asked by: username_0 on 2018-09-18)

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](https://craftcms.stackexchange.com/questions/17058/if-youtube-in-redactor-then-wrap-in-div/17062) how to add a single class, but Bootstrap [requires multiple classes](https://getbootstrap.com/docs/4.1/utilities/embed/) to be added to the wrapper.

**Tags:** redactor, classes


---

## 2 answers

### Answer by username_0 on 2018-09-18. Score: 4 | Accepted answer

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.


---

### Answer by username_1 on 2019-10-09. Score: 3

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('');

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

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

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

          }
          else {
            this.parse('');
          }

          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.

> **Comments:**
> **username_2**: Hey username_2, would you mind sharing the CSS that accompanies that JS? Thanks  

---

