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'
allowedContent: true
bodyClass: 'wiki'
@ -7,8 +6,10 @@ removePlugins: 'codemirror,div,flash,forms,iframe,copyformatting,elementspath'
forcePasteAsPlainText: false
entities: false
# HTML sanitizer configuration
# Youtube plugin defaults:
youtube_responsive: true
# HTML sanitizer configuration:
allowedProtocols:
- afs
- aim

View file

@ -1,12 +1,12 @@
CKEDITOR.plugins.setLang('youtube', 'es', {
button : 'Embed YouTube video',
title : 'Embed YouTube video',
txtEmbed : 'Pegar el código embed',
txtUrl : 'Pegar la URL al video de Youtube',
txtEmbed : 'Pegar directamente el código embed',
txtUrl : 'Usar la URL y opciones del video de Youtube',
txtWidth : 'Anchura',
txtHeight : 'Altura',
chkRelated : 'Mostrar videos sugeridos al final de este video',
txtStartAt : 'Comenzar en (ss or mm:ss or hh:mm:ss)',
chkRelated : 'Mostrar videos sugeridos al final del video',
txtStartAt : 'Comenzar en (ss ó mm:ss ó hh:mm:ss)',
chkPrivacy : 'Habilitar el modo privacy-enhanced',
chkOlderCode : 'Usar código embed viejo',
chkAutoplay: 'Autoplay',
@ -14,11 +14,12 @@ CKEDITOR.plugins.setLang('youtube', 'es', {
noCode : 'Debes de introducir un código embed o URL',
invalidEmbed : 'El código embed introducido parece no ser valido',
invalidUrl : 'La URL introducida parece no ser valida',
or : 'o',
or : 'ó',
noWidth : 'Debes de dar la anchura',
invalidWidth : 'Da una anchura valida',
noHeight : 'Debes dar una altura valida',
invalidHeight : 'Da una altura valida',
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) {
content += '<div class="youtube-embed-wrapper" style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden">';
responsiveStyle = 'style="position:absolute;top:0;left:0;width:100%;height:100%"';
content += '<div class="youtube-embed-wrapper">';
responsiveStyle = 'class="responsive-view"';
}
if (this.getContentElement('youtubePlugin', 'chkOlderCode').getValue() === true) {

View file

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

View file

@ -84,6 +84,22 @@ hr {
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 */
@media screen and (max-width: 767px) {
.wiki p, .wiki li {