Presentación de videos en modo 'responsive' por defecto usando los estilos del editor

This commit is contained in:
Manuel Cillero 2018-02-20 19:59:03 +01:00
parent b99e3bff3d
commit 02f57502c3
5 changed files with 30 additions and 12 deletions

View file

@ -1,5 +1,4 @@
# CKEditor configuration # CKEditor configuration:
contentsCss: '/themes/circlepro/stylesheets/editor.css' contentsCss: '/themes/circlepro/stylesheets/editor.css'
allowedContent: true allowedContent: true
bodyClass: 'wiki' bodyClass: 'wiki'
@ -7,8 +6,10 @@ removePlugins: 'codemirror,div,flash,forms,iframe,copyformatting,elementspath'
forcePasteAsPlainText: false forcePasteAsPlainText: false
entities: false entities: false
# HTML sanitizer configuration # Youtube plugin defaults:
youtube_responsive: true
# HTML sanitizer configuration:
allowedProtocols: allowedProtocols:
- afs - afs
- aim - aim

View file

@ -1,12 +1,12 @@
CKEDITOR.plugins.setLang('youtube', 'es', { CKEDITOR.plugins.setLang('youtube', 'es', {
button : 'Embed YouTube video', button : 'Embed YouTube video',
title : 'Embed YouTube video', title : 'Embed YouTube video',
txtEmbed : 'Pegar el código embed', txtEmbed : 'Pegar directamente el código embed',
txtUrl : 'Pegar la URL al video de Youtube', txtUrl : 'Usar la URL y opciones del video de Youtube',
txtWidth : 'Anchura', txtWidth : 'Anchura',
txtHeight : 'Altura', txtHeight : 'Altura',
chkRelated : 'Mostrar videos sugeridos al final de este video', chkRelated : 'Mostrar videos sugeridos al final del video',
txtStartAt : 'Comenzar en (ss or mm:ss or hh:mm:ss)', txtStartAt : 'Comenzar en (ss ó mm:ss ó hh:mm:ss)',
chkPrivacy : 'Habilitar el modo privacy-enhanced', chkPrivacy : 'Habilitar el modo privacy-enhanced',
chkOlderCode : 'Usar código embed viejo', chkOlderCode : 'Usar código embed viejo',
chkAutoplay: 'Autoplay', chkAutoplay: 'Autoplay',
@ -14,11 +14,12 @@ CKEDITOR.plugins.setLang('youtube', 'es', {
noCode : 'Debes de introducir un código embed o URL', noCode : 'Debes de introducir un código embed o URL',
invalidEmbed : 'El código embed introducido parece no ser valido', invalidEmbed : 'El código embed introducido parece no ser valido',
invalidUrl : 'La URL introducida parece no ser valida', invalidUrl : 'La URL introducida parece no ser valida',
or : 'o', or : 'ó',
noWidth : 'Debes de dar la anchura', noWidth : 'Debes de dar la anchura',
invalidWidth : 'Da una anchura valida', invalidWidth : 'Da una anchura valida',
noHeight : 'Debes dar una altura valida', noHeight : 'Debes dar una altura valida',
invalidHeight : 'Da una altura valida', invalidHeight : 'Da una altura valida',
invalidTime : 'Da un tiempo de valido', invalidTime : 'Da un tiempo de valido',
txtResponsive : 'Hacer responsivo (ignorar anchura y altura, ajustar a la anchura)' txtResponsive : 'Ajustar al ancho manteniendo proporción',
txtNoEmbed : 'Sólo imagen del video y enlace'
}); });

View file

@ -277,8 +277,8 @@
} }
if (this.getContentElement('youtubePlugin', 'chkResponsive').getValue() === true) { if (this.getContentElement('youtubePlugin', 'chkResponsive').getValue() === true) {
content += '<div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden">'; content += '<div class="youtube-embed-wrapper">';
responsiveStyle = 'style="position:absolute;top:0;left:0;width:100%;height:100%"'; responsiveStyle = 'class="responsive-view"';
} }
if (this.getContentElement('youtubePlugin', 'chkOlderCode').getValue() === true) { if (this.getContentElement('youtubePlugin', 'chkOlderCode').getValue() === true) {

View file

@ -80,6 +80,7 @@ div#content h1 {
div.journal div[id^="note-"] > h4:first-child { div.journal div[id^="note-"] > h4:first-child {
font-size: 13px; font-size: 13px;
padding-right: 0; padding-right: 0;
margin: 10px 0 20px;
line-height: 15px; line-height: 15px;
} }
.journal-link { .journal-link {
@ -98,7 +99,6 @@ h4 img.gravatar {
display: block; display: block;
float: left; float: left;
margin-right: 6px; margin-right: 6px;
margin-bottom: 4px;
} }
div.gravatar-with-child > img.gravatar:nth-child(2) { div.gravatar-with-child > img.gravatar:nth-child(2) {
border: solid 1px #d5d5d5; border: solid 1px #d5d5d5;

View file

@ -84,6 +84,22 @@ hr {
border: 0; border: 0;
} }
/* Youtube plugin */
div.youtube-embed-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.youtube-embed-wrapper .responsive-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Responsive */ /* Responsive */
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.wiki p, .wiki li { .wiki p, .wiki li {