diff --git a/app/Resources/public/css/base.css b/app/Resources/public/css/base.css index 15e0b6cb12..b7236dae45 100644 --- a/app/Resources/public/css/base.css +++ b/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 { diff --git a/app/Resources/public/css/editor_content.css b/app/Resources/public/css/editor_content.css index 80298dac1d..e8e83ab8aa 100644 --- a/app/Resources/public/css/editor_content.css +++ b/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%; +} diff --git a/main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js b/main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js index 8853c049a1..944d495fbe 100644 --- a/main/inc/lib/javascript/ckeditor/plugins/video/dialogs/video.js +++ b/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 () { diff --git a/main/inc/lib/javascript/ckeditor/plugins/video/plugin.js b/main/inc/lib/javascript/ckeditor/plugins/video/plugin.js index 2234b500c3..d46f9e562e 100644 --- a/main/inc/lib/javascript/ckeditor/plugins/video/plugin.js +++ b/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