X-Git-Url: https://git.immae.eu/?p=perso%2FImmae%2FProjets%2Fpackagist%2Fludivine-ckeditor-component.git;a=blobdiff_plain;f=sources%2Fplugins%2Fhtml5video%2Fplugin.js;h=bf512852da7d389a8516a1de920e3c91b8236527;hp=1bfff7f9b518c6236b3354d3335318b54ad4b463;hb=1794320dcfdfcd19572fb1676294f9853a6bbc20;hpb=7183f6a6a21ad9124e70c997e0168459f377a9f2

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