Sé que esto se ha preguntado muchas veces, pero abro esta discusión para resolver mi problema y resumir todo lo que sabemos sobre este tema para ayudar a las personas en el futuro.
Entonces vamos. Queremos subir un video (por ejemplo, de YouTube). Podemos hacer esto pegando la url del video o usando el botón MediaEmbed.
Tenemos dos posibilidades.
Podemos establecer o no en nuestro editorConfig
mediaEmbed: { vistas previas en datos: verdadero }
SIN previewsInData: true obtenemos algo como esto:
<figure class="media"> <oembed url="https://www.youtube.com/watch?v=something"></oembed> </figure> En cambio CON previewsInData: true obtenemos algo como esto
<figure class="media"> <div data-oembed-url="https://www.youtube.com/watch?v=vsl3gBVO2k4&ab_channel=H%C3%A9lderPalma"> <div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"> <iframe src="https://www.youtube.com/embed/vsl3gBVO2k4" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""> </iframe> </div> </div> </figure>En ambos casos, puedo ver la vista previa del video de YouTube en mi CKEditor. Pero cuando guardo el contenido del editor y logro mostrarlo en mi página de presentación, el video no se muestra.
Al leer las otras discusiones aquí en el foro, no pude averiguar si este es solo mi problema o no. Muchas soluciones relacionadas con la adición de previewsInData: true en editorConfig, pero para mí absolutamente nada cambia.
Creo que la figure de la etiqueta y el oembed div son útiles para que CKEditor muestre una vista previa del video. Sabemos que esta vista previa es como una imagen, no puedes reproducir el video, no puedes abrirlo en una nueva página, etc. Está bien, pero quiero ver el video en mi página de presentación.
¿Entonces, dónde está el problema?
Espero que podamos encontrar una solución permanente a este problema.
De hecho, debería usar una 'frontend' para mostrar las etiquetas oembed, como dice en el manual en: https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html#displaying-embedded-media- en tu sitio web
Puede proporcionar su propio proveedor de medios usando esto:
ClassicEditor .create( editorElement, { plugins: [ MediaEmbed, ... ], mediaEmbed: { extraProviders: [ { name: 'extraProvider', url: /^example\.com\/media\/(\w+)/, html: match => '...' }, ... ] } } ) .then( ... ) .catch( ... );y el html podría ser algo como:
... html: match => '<div style="position:relative; padding-bottom:100%; height:0">' + '<iframe src="..." frameborder="0" ' + 'style="position:absolute; width:100%; height:100%; top:0; left:0">' + '</iframe>' + '</div>'Puedes encontrar más en los documentos, aquí:
https://ckeditor.com/docs/ckeditor5/latest/api/module_media-embed_mediaembed-MediaEmbedProvider.html
también podría hacer algo como esto usted mismo, evitando proveedores externos de oembed:
window.addEventListener('load', function(){ document.querySelectorAll('oembed[url]').forEach( element => { // get just the code for this youtube video from the url let vCode = element.attributes.url.value.split('?v=')[1]; // paste some BS5 embed code in place of the Figure tag element.parentElement.outerHTML= ` <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/${vCode}?rel=0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>`; }); })Por supuesto, tendría que actualizar la secuencia de comandos para todas las versiones diferentes de contenido incrustado, este ejemplo solo funcionará para youtube. Tendría que analizar la URL de la etiqueta oembed para verificar qué está incrustado y poder agregar el código correcto para cada variante.