CKEditor: Allow 9:16 or 3:4 videos - refs BT#18073

app/Resources/public/css/base.css

@@ -9504,6 +9504,13 @@ ul.dropdown-menu.inner > li > a {
     padding: 0;
 }
 
+.embed-responsive-9by16 {
+    padding-bottom: 177.77%;
+}
+.embed-responsive-4by3 {
+    padding-bottom: 133.33%;
+}
+
 /* CSS Responsive */
 @media (min-width: 1025px) and (max-width: 1200px) {
     .sidebar-scorm {

app/Resources/public/css/editor_content.css

@@ -170,3 +170,10 @@ figure.image figcaption {
     padding-top: 0;
     text-align: left;
 }
+
+.embed-responsive-9by16 {
+    padding-bottom: 177.77%;
+}
+.embed-responsive-3by4 {
+    padding-bottom: 133.33%;
+}

main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js

@@ -63,6 +63,18 @@ CKEDITOR.dialog.add( 'video', function ( editor )
         video[id] = this.getValue();
     }
 
+    function onChangeSrc( event )
+    {
+        var dialog = this.getDialog(),
+            videoEl = document.createElement('video');
+
+        videoEl.onloadedmetadata = function () {
+            dialog.setValueOf( 'info', 'width', videoEl.videoWidth );
+            dialog.setValueOf( 'info', 'height', videoEl.videoHeight );
+        };
+        videoEl.src = location.origin + event.data.value;
+    }
+
     function loadValue( videoNode )
     {
         if ( videoNode ) {
@@ -217,7 +229,9 @@ CKEDITOR.dialog.add( 'video', function ( editor )
                     responsiveParent = newFakeImage.getParent();
                     responsiveParent.removeClass('embed-responsive');
                     responsiveParent.removeClass('embed-responsive-16by9');
+                    responsiveParent.removeClass('embed-responsive-9by16');
                     responsiveParent.removeClass('embed-responsive-4by3');
+                    responsiveParent.removeClass('embed-responsive-3by4');
                 }
             }
             else
@@ -238,9 +252,15 @@ CKEDITOR.dialog.add( 'video', function ( editor )
                     case '16by9':
                         responsiveParent.addClass('embed-responsive-16by9');
                         break;
+                    case '9by16':
+                        responsiveParent.addClass('embed-responsive-9by16');
+                        break;
                     case '4by3':
                         responsiveParent.addClass('embed-responsive-4by3');
                         break;
+                    case '3by4':
+                        responsiveParent.addClass('embed-responsive-3by4');
+                        break;
                 }
             }
         },
@@ -271,6 +291,7 @@ CKEDITOR.dialog.add( 'video', function ( editor )
                                         type : 'text',
                                         id : 'src0',
                                         label : lang.sourceVideo,
+                                        onChange: onChangeSrc,
                                         commit : commitSrc,
                                         setup : loadSrc
                                     },
@@ -297,6 +318,7 @@ CKEDITOR.dialog.add( 'video', function ( editor )
                                                 [ 'MP4', 'video/mp4' ],
                                                 [ 'WebM', 'video/webm' ]
                                             ],
+                                        onChange: onChangeSrc,
                                         commit : commitSrc,
                                         setup : loadSrc
                                     }]
@@ -417,7 +439,7 @@ CKEDITOR.dialog.add( 'video', function ( editor )
                                 type: 'radio',
                                 id: 'responsive',
                                 label: lang.responsive,
-                                items: [ [ lang.ratio16by9, '16by9' ], [ lang.ratio4by3, '4by3' ] ],
+                                items: [ [ lang.ratio16by9, '16by9' ],  [ lang.ratio9by16, '9by16' ], [ lang.ratio4by3, '4by3' ], [ lang.ratio3by4, '3by4' ] ],
                                 commit : commitValue,
                                 setup : loadValue,
                                 onChange: function () {

main/inc/lib/javascript/ckeditor/plugins/video/plugin.js

@@ -195,8 +195,10 @@ var en = {
   video360: 'Enable 360° video player',
   video360stereo: 'Stereo video (1:1 aspect ratio)',
   responsive: 'Resposive size (mobile-optimized)',
-  ratio16by9: '16:9 aspect ratio',
-  ratio4by3: '4:3 aspect ratio'
+  ratio16by9: '16:9 aspect ratio (horizontal)',
+  ratio9by16: '9:16 aspect ratio (vertical)',
+  ratio4by3: '4:3 aspect ratio (horizontal)',
+  ratio3by4: '3:4 aspect ratio (vertical)'
 };
 
 var es = {
@@ -216,8 +218,10 @@ var es = {
   video360: 'Habilitar reproductor de vídeo 360°',
   video360stereo: 'Vídeo estéreo (relación de aspecto 1:1)',
   responsive: 'Tamaño adaptable (tamaño optimizado para móviles)',
-  ratio16by9: 'Relación de aspecto 16:9',
-  ratio4by3: 'Relación de aspecto 4:3'
+  ratio16by9: 'Relación de aspecto 16:9 (horizontal)',
+  ratio9by16: 'Relación de aspecto 9:16 (vertical)',
+  ratio4by3: 'Relación de aspecto 4:3 (horizontal)',
+  ratio3by4: 'Relación de aspecto 3:4 (vertical)'
 };
 
 var fr = {
@@ -237,8 +241,10 @@ var fr = {
 	video360: 'Activer la visualisation 360°',
 	video360stereo: 'Vidéo stéréo (proportions 1:1 / apparence de 2 vidéos superposées)',
 	responsive: 'Resposive',
-	ratio16by9: '16:9 aspect ratio',
-	ratio4by3: '4:3 aspect ratio'
+	ratio16by9: '16:9 aspect ratio (horizontal)',
+	ratio9by16: '9:16 aspect ratio (vertical)',
+	ratio4by3: '4:3 aspect ratio (horizontal)',
+	ratio3by4: '3:4 aspect ratio (vertical)'
 };
 
 // v3