4 files changed, 34 insertions, 13 deletions

diff --git a/sources/plugins/html5video/dialogs/html5video.js b/sources/plugins/html5video/dialogs/html5video.js
index 99f89c3..76799e7 100644
--- a/sources/plugins/html5video/dialogs/html5video.js
+++ b/sources/plugins/html5video/dialogs/html5video.js
@@ -41,13 +41,23 @@
                 } ]

             },

             {

+                type: 'checkbox',

+                id: 'responsive',

+                label: editor.lang.html5video.responsive,

+                setup: function( widget ) {

+                    this.setValue( widget.data.responsive );

+                },

+                commit: function( widget ) {

+                    widget.setData( 'responsive', this.getValue()?'true':'' );

+                }

+            },

+            {

                 type: 'hbox',

                 id: 'size',

                 children: [ {

                     type: 'text',

                     id: 'width',

                     label: editor.lang.common.width,

-                    'default': 400,

                     setup: function( widget ) {

                         if ( widget.data.width ) {

                             this.setValue( widget.data.width );

@@ -61,7 +71,6 @@
                     type: 'text',

                     id: 'height',

                     label: editor.lang.common.height,

-                    'default': 300,

                     setup: function( widget ) {

                         if ( widget.data.height ) {

                             this.setValue( widget.data.height );

diff --git a/sources/plugins/html5video/lang/en.js b/sources/plugins/html5video/lang/en.js
index ebac6e5..40eae12 100644
--- a/sources/plugins/html5video/lang/en.js
+++ b/sources/plugins/html5video/lang/en.js
@@ -10,5 +10,6 @@
     advanced: 'Advanced',

     autoplay: 'Autoplay?',

     yes: 'Yes',

-    no: 'No'

+    no: 'No',

+        responsive: 'Responsive width'

 } );

diff --git a/sources/plugins/html5video/lang/ru.js b/sources/plugins/html5video/lang/ru.js
index 5eeeba6..cd5a195 100644
--- a/sources/plugins/html5video/lang/ru.js
+++ b/sources/plugins/html5video/lang/ru.js
@@ -10,5 +10,6 @@
     advanced: 'Дополнительно',

     autoplay: 'Автовоспроизведение',

     yes: 'Да',

-    no: 'Нет'

+    no: 'Нет',

+    responsive: 'Адаптивная ширина'

 } );

diff --git a/sources/plugins/html5video/plugin.js b/sources/plugins/html5video/plugin.js
index 1bfff7f..bf51285 100644
--- a/sources/plugins/html5video/plugin.js
+++ b/sources/plugins/html5video/plugin.js
@@ -9,9 +9,9 @@
             /*

              * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):

              *  - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.

-             *  - video tags with src and controls attributes.

+             *  - video tags with src, controls, width and height attributes.

              */

-            allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];',

+            allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay,width, height]{max-width,height};',

             requiredContent: 'div(ckeditor-html5-video); video[src,controls];',

             upcast: function( element ) {

                 return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' );

@@ -32,6 +32,7 @@
                     width = this.element.getChild( 0 ).getAttribute( 'width' );

                     height = this.element.getChild( 0 ).getAttribute( 'height' );

                     autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );

+                                                                                responsive = this.element.getAttribute( 'data-responsive' );

                 }

 

                 if ( src ) {

@@ -45,19 +46,19 @@
 

                     if ( width ) {

                         this.setData( 'width', width );

-                    } else {

-                        this.setData( 'width', '400' );

                     }

 

                     if ( height ) {

                         this.setData( 'height', height );

-                    } else {

-                        this.setData( 'height', '300' );

                     }

 

                     if ( autoplay ) {

                         this.setData( 'autoplay', 'yes' );

                     }

+

+                    if ( responsive ) {

+                        this.setData( 'responsive', responsive );

+                    }

                 }

             },

             data: function() {

@@ -72,9 +73,18 @@
                         // Append it to the container of the plugin.

                         this.element.append( videoElement );

                     }

-                    this.element.getChild( 0 ).setAttribute( 'src', this.data.src )

-                        .setAttribute( 'width', this.data.width )

-                        .setAttribute( 'height', this.data.height );

+                    this.element.getChild( 0 ).setAttribute( 'src', this.data.src );

+                    if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width );

+                    if (this.data.height) this.element.getChild( 0 ).setAttribute( 'height', this.data.height );

+

+                    if ( this.data.responsive ) {

+                            this.element.setAttribute("data-responsive", this.data.responsive);

+                            this.element.getChild( 0 ).setStyle( 'max-width', '100%' );

+                            this.element.getChild( 0 ).setStyle( 'height', 'auto' );

+                    } else {

+                            this.element.getChild( 0 ).removeStyle( 'max-width' );

+                            this.element.getChild( 0 ).removeStyle( 'height' );

+                    }

                 }

 

                 this.element.removeStyle( 'float' );