/*\r
* Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):\r
* - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.\r
- * - video tags with src and controls attributes.\r
+ * - video tags with src, controls, width and height attributes.\r
*/\r
- allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];',\r
+ allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay,width, height]{max-width,height};',\r
requiredContent: 'div(ckeditor-html5-video); video[src,controls];',\r
upcast: function( element ) {\r
return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' );\r
width = this.element.getChild( 0 ).getAttribute( 'width' );\r
height = this.element.getChild( 0 ).getAttribute( 'height' );\r
autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );\r
+ responsive = this.element.getAttribute( 'data-responsive' );\r
}\r
\r
if ( src ) {\r
\r
if ( width ) {\r
this.setData( 'width', width );\r
- } else {\r
- this.setData( 'width', '400' );\r
}\r
\r
if ( height ) {\r
this.setData( 'height', height );\r
- } else {\r
- this.setData( 'height', '300' );\r
}\r
\r
if ( autoplay ) {\r
this.setData( 'autoplay', 'yes' );\r
}\r
+\r
+ if ( responsive ) {\r
+ this.setData( 'responsive', responsive );\r
+ }\r
}\r
},\r
data: function() {\r
// Append it to the container of the plugin.\r
this.element.append( videoElement );\r
}\r
- this.element.getChild( 0 ).setAttribute( 'src', this.data.src )\r
- .setAttribute( 'width', this.data.width )\r
- .setAttribute( 'height', this.data.height );\r
+ this.element.getChild( 0 ).setAttribute( 'src', this.data.src );\r
+ if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width );\r
+ if (this.data.height) this.element.getChild( 0 ).setAttribute( 'height', this.data.height );\r
+\r
+ if ( this.data.responsive ) {\r
+ this.element.setAttribute("data-responsive", this.data.responsive);\r
+ this.element.getChild( 0 ).setStyle( 'max-width', '100%' );\r
+ this.element.getChild( 0 ).setStyle( 'height', 'auto' );\r
+ } else {\r
+ this.element.getChild( 0 ).removeStyle( 'max-width' );\r
+ this.element.getChild( 0 ).removeStyle( 'height' );\r
+ }\r
}\r
\r
this.element.removeStyle( 'float' );\r