Кому-нибудь удавалось встроить в статью telegra.ph сторонний iframe?

Question

[accountnujen]

В api telegraph указано, что он поддерживает iframe, однако у меня так и не получилось встроить никакой сторонний iframe (кроме youtube). Там вырезана поддержка других iframe или же всё-таки есть способ встраивания?

Единственное, что меня смущает - это как выглядит вставка youtube видео

[{"tag":"figure","children":[{"tag":"iframe","attrs":{"src":"/embed/youtube?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DtrHMLJpxG7o"}}]}]

а именно "src":"/embed/youtube?url=. Я нигде не могу найти первоисточник данной записи. Только пару вопросов с stackoverflow, где предложили такой вариант, однако в документации по telegraph этого нет, поэтому непонятно, откуда пользователи это взяли..

Answer 1

[Александр Карабанов]

Если погуглить по такому запросу site:telegra.ph embed
Можно понять, что на telegra.ph есть скрипт который получает ссылку на оригинал видео и встраивает его в страницу.
Если погуглить ещё, то можно найти способ встроить в страницу картинку.
В целом я могу сделать вывод, что встраивать в страницу iframe можно, но только с разрешённым контентом.

Comments

[accountnujen]

я открыл вашу первую ссылку и обратил внимание, что там сделан скриншот сайта instantview.telegram.org . Перемещаясь по сайту я набрёл вот на такой код:

spoiler

# twitter-tweet
@before(<iframe>, \
  src, ".//a[starts-with(@href, \"https://twitter.com/\")][contains(@href, \"/status/\") or contains(@href, \"/statuses/\")]/@href", \
  class, "twitter-tweet" \
): $body//blockquote[has-class("twitter-tweet")]
@remove

# twitter-video
@before(<iframe>, \
  src, ".//a[starts-with(@href, \"https://twitter.com/\")][contains(@href, \"/status/\") or contains(@href, \"/statuses/\")]/@href", \
  class, "twitter-video" \
): $body//blockquote[has-class("twitter-video")]
@remove

# facebook post
$fb_post: $body//div[has-class("fb-post")][@data-href]
@urlencode: $fb_post/@data-href
@set_attr(data-src, "https://www.facebook.com/plugins/post.php?href=", @data-href, "&show_text=", @data-show-text, "&width=640"): $fb_post
@before(<iframe>, src, @data-src, class, "fb-post"): $fb_post
@remove

# facebook video
$fb_video: $body//div[has-class("fb-video")][@data-href]
@urlencode: $fb_video/@data-href
@set_attr(data-src, "https://www.facebook.com/plugins/video.php?href=", @data-href, "&show_text=", @data-show-text, "&width=640"): $fb_video
@before(<iframe>, src, @data-src, class, "fb-video"): $fb_video
@remove

# aparat
$aparat_video: $body//script[starts-with(@src, "https://www.aparat.com/embed/")]
@set_attr(data-hash, @src)
@match("^https://www.aparat.com/embed/([^?]+)", 1): $@
@set_attr(data-src, "https://www.aparat.com/video/video/embed/videohash/", @data-hash, "\\/vt/frame"): $aparat_video
@before(<iframe>, src, @data-src, class, "aparat"): $aparat_video
@remove

# instagram
@before(<iframe>, \
  src, ".//a[contains(@href, \"instagram.com/p/\")]/@href", \
  class, "instagram" \
): $body//blockquote[has-class("instagram-media")]
@remove

# github
<iframe>: $body//script[starts-with(@src,"https://gist.github.com/")]

# telegram
$tg_post: $body//*[self::script or self::blockquote][@data-telegram-post]
@set_attr(data-src, "https://t.me/", @data-telegram-post, "?embed=1"): $tg_post
@set_attr(data-src, @data-src, "&userpic=", @data-userpic): $tg_post[@data-userpic]
@set_attr(data-src, @data-src, "&single=1"): $tg_post[@data-single]
@before(<iframe>, src, @data-src, class, "telegram-post"): $tg_post
@remove

а ещё на вот такие записи: https://instantview.telegram.org/docs#embedded-elements

То есть, по сути, можно и gist.github, и SoundCloud, и даже vk.com . Только как вот это сделать в telegra.ph...

Чтобы убедиться в поддерживаемости элемента - нужно открыть его через вот такую ссылку:

https://telegra.ph/embed/youtube?url=https://www.youtube.com/watch?v=HpXHdegMTtw

для twitter это будет выглядеть вот так:

https://telegra.ph/embed/twitter?url=https://twitter.com/norimyxxxo/status/1460182801794404357

А как должно быть для gist или vk?

[Александр Карабанов]

accountnujen, не думаю, что можно смело делать такой вывод из информации представленной в embedded-elements, но не исключаю, что это на самом деле возможно.

Для Vimeo я попробовал получить котент и получилось

Можно попробовать поискать с модификатором url:, например.

[accountnujen]

Александр Карабанов, ну vimeo есть как раз в списках поддерживаемых по ссылке. При добавлении поста если просто кинуть ссылку на vimeo, youtube или twitter , то подгрузится iframe

[Александр Карабанов]

accountnujen, а с VK, например, так не происходит?

[accountnujen]

Александр Карабанов, https://telegra.ph/ - если здесь вставить ссылку youtube,twitter,vimeo - будет iframe. Во всех остальных случаях (в том числе vk) будет просто ссылка