Incrustación de temas rediseñados de Reddit con video

¿Cómo podemos incrustar videos de Reddit en nuestra publicación? Por ejemplo, esta publicación:

Enlace aquí

Tiene un código de incrustación como este:

<blockquote class="reddit-card" data-card-created="1588774544"><a href="https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/">También decidí editar a las 2 AM</a> de <a href="http://www.reddit.com/r/VALORANT">r/VALORANT</a></blockquote>
<script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

¿Qué tal esto?

  https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/

Que hace esto:

Ah. Eso no está bien. Quieres que el video se reproduzca en Discourse, no que te redirija a Reddit.

1 me gusta

Gracias.
Sí, si es posible, queremos reproducirlo directamente allí, como YouTube y Vimeo.

Jaja, ustedes dos quieren eso, pero ¿han considerado qué quiere Reddit?

Desde que cambiaron toda su filosofía y comenzaron con lo de v.redd.it, ya no es lo mismo.

Todas las etiquetas OpenGraph y Twitter Card nos dan una imagen estática. Reddit es bastante claro al permitir solo la incrustación de una imagen estática.

Si profundizas más, descubrirás que el video está en un contenedor DASH, por lo que el audio y el video son archivos separados. Lograr que se reproduzca en Discourse significa, al menos, utilizar un reproductor de video JS personalizado.

1 me gusta

De hecho, Reddit permite esto:

Cuando haces clic en el botón Insertar, muestra lo siguiente:

Mi problema es cómo permitir que eso se muestre en mi publicación en mi sitio de Discourse.

Probé el enlace de share de old.reddit y también es solo una imagen. ¿Es esa la nueva interfaz de Reddit?

Sí, es el nuevo.

1 me gusta

Oh, parece que lo están externalizando a embed.ly.

Al profundizar en ello, parece que usar el ID de la publicación permite construir un iFrame funcional, después de todo.

A menos que @techAPJ quiera ocuparse de ello, yo diría que pr-welcome

<iframe src="https://old.reddit.com/mediaembed/gdyrsg" width="690" height="388">

[UN IFRAME QUE FUNCIONA Y REPRODUCE EL VIDEO AUTOMÁTICAMENTE]

2 Me gusta

@Falco, ¿podemos encontrar una solución que no reproduzca el video automáticamente?

Edición: Si aplicamos forzosamente allow="autoplay 'none'" al elemento iframe en el sanitizador de HTML, eso podría solucionarlo (solo en navegadores nuevos).

Además, ninguno de los botones del reproductor funciona (por ejemplo, pausar, pantalla completa, etc).

¿Alguien se anima a hacer un PR sobre esto? :thinking:

Si haces clic en el botón Compartir > Incrustar en esta URL de ejemplo, luego copia este código:


<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419">
</iframe>

El video se incrusta y se reproduce en la ventana del compositor:

Pero el video desaparece cuando se envía la publicación.

Agregar allow="autoplay 'none'" al final del elemento iframe hace que el video aparezca, y luego se reproduce bien con todos los controles de incrustación funcionando (pausa, reproducir, etc.):


<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419"
allow="autoplay 'none'">
</iframe>

Así: