Ayuda:Incrustar video, audio, código y 3D

Cuándo usar esta guía

Quieres mostrar dentro de tu página algo que vive en otro servicio: un video, un audio, un sketch de código, una visualización o un modelo 3D. Casiopea lo hace con widgets: un código corto que se escribe en la página y la wiki convierte en el contenido.

Requisitos

• Cuenta en Casiopea y sesión iniciada.
• Poder editar la página donde lo vas a mostrar.
• Que el contenido sea público o se pueda compartir en su servicio. Si en YouTube o Sketchfab está privado, en la wiki no se verá.

Pasos

1. Busca en la tabla de abajo qué widget corresponde a tu contenido.
2. Consigue el identificador de tu contenido (el ID o la URL). Cada sección de abajo dice dónde encontrarlo.
3. Abre tu página en modo Editar y escribe el código del widget donde quieres que aparezca.
4. Pulsa Mostrar previsualización, revisa cómo se ve y guarda.

Qué puedes incrustar

Video

Audio

Código y visualización

3D

Video

YouTube. El ID es el texto que va después de watch?v= en la dirección del video (o después de youtu.be/).

{{#widget:YouTube|id=ID_DEL_VIDEO}}

Para que empiece en un momento, agrega start con los segundos: |start=90. Para una lista de reproducción, usa playlist con el ID de la lista en lugar de id. El video ocupa todo el ancho de la página.

Vimeo. El ID es el número al final de la dirección del video (en vimeo.com/8758454, es 8758454).

{{#widget:Vimeo|id=8758454}}

Audio

SoundCloud. Solo funciona con audios individuales, no con listas. En SoundCloud, pulsa Compartir y luego Insertar: el ID es el número que aparece después de tracks/ en el código que te muestra.

{{#widget:SoundCloud|id=ID_DEL_AUDIO}}

Para ver la imagen del audio en grande, agrega |visual=true|height=300.

Código y visualización

Si nunca has hecho un sketch en la wiki, empieza por Tu primer sketch en Casiopea.

P5js. En el editor de p5.js, abre tu sketch y usa File › Share. Copia la dirección de tipo «present».

{{#widget:P5js|url=https://editor.p5js.org/TU_USUARIO/present/ID_DEL_SKETCH|height=400}}

PiX. Genera tu partitura en la aplicación PiX y copia el código que entrega para insertar.

{{#widget:PiX|data=CÓDIGO_DE_PIX}}

Si la partitura tiene más de tres capas, agrega |height=1000.

Matter. Solo carga la biblioteca Matter.js. Tu simulación se escribe en un bloque <script> después del widget, en la misma página.

Modelos 3D

Sketchfab. En el modelo, pulsa Embed y elige iFrame: el ID es el código que aparece en la dirección del modelo.

{{#widget:Sketchfab|id=ID_DEL_MODELO|width=100%|height=500}}

F3D. Para dibujos hechos en Filippo3D. Ajusta la vista en Filippo3D, copia la dirección y toma todo lo que va después de #d=.

{{#widget:F3D|data=CADENA_DESPUÉS_DE_d=|height=650}}

Si algo falla

• No se ve nada. Revisa que el contenido sea público en su servicio y que copiaste el ID completo, sin espacios.
• Se ve el código en vez del contenido. Revisa que el código empiece con {{#widget: y termine con }}, y que el nombre del widget esté bien escrito (con mayúsculas, como en la tabla).
• El sketch de P5 no funciona y usa ||. La wiki usa | para separar parámetros. Reemplaza el || por dos if separados; está explicado en Tu primer sketch en Casiopea.

Bueno saber

Hay otras extensiones instaladas que permiten mostrar diagramas, líneas de tiempo y modelos 3D subidos a la wiki. Se están revisando y se sumarán a esta guía si funcionan.

Fuentes

• Ayuda:Guía para incrustar objetos y las páginas de cada widget: Widget:YouTube, Widget:Vimeo, Widget:SoundCloud, Widget:P5, Widget:P5m, Widget:P5js, Widget:Matter, Widget:PiX, Widget:Sketchfab y Widget:F3D.