Embedded video in notes

It doesn’t seem possible to embed videos through an iframe link, like in Obsidian.

Do you confirm there is no way, and there will never be ?

Please be more specific. What file format are you talking about?
Since you mention Obsidian, I’ll assume this is about markdown. I generally have no problem embedding iframes in markdown documents.

It’s much easier if you include a concrete example.


Edit: I’m sure standard YouTube iframes used to work, but they don’t work now. I don’t know why.

Sharing a Youtube page in a new DT html document works well.

My needs are :

  1. Include a video (generally a YouTube video) in a note

  2. Share a Readwise Reader document to a new DT document

  3. I use a lot iframe links in Obsidian notes, by just copying-pasting the link Youtube provides by the sharing menu. Unfortunately, I I didn’t find how to make it work in DT (see screen copies). The iFrame URL seems inactive.

  4. I’m looking for a way to use my Readwise Reader clips into DT, allowing me to also import the video transcription made by Reader. I do this in Obsidian, and get a note with both the video and the transcription.
    If I open a Reader document URL in a new Safari tab, and clip it through the DT clipper (my intention being to create a note with the same content than in Reader, in other words import a Readwise Reader note/page into DT), I get an error message (see screen copy). I click on OK, verify Reader is updated, same message.
    Same error message if I copy directly the URL -or the public link- from the RR document/page to a new DT document.
    In other terms, I don’t find a way to get a RR clip into DT, and I don’t get why.

A bridge between Readwise Reader and DT would be great IMO.

Did I miss something ?

BTW, is there a solution to get the transcript of a YT video imported in DT ?

The error message you keep getting is coming from Readwise rather than DT, so it might be worth asking them.

For both you and @troejgaard though, have you tried using an iframe for a non-YouTube video? YouTube has been implementing a range of “hostile” code that limits how videos can be embedded (they want you to go on the website/app) so it may simply be that the videos you’re looking at are falling afoul of their restrictions.

Off the top of my head, there could be an age-restriction or an age flag on the video, a geographic restriction, the uploader might have disabled sharing, YouTube might be requiring you to be signed in to view it… Testing with a different video service might help narrow down the issue.

2 Likes

Thanks, I’ll try that, though embedding videos from Youtube is my main need, and I’ve never had issues with these embed URLs within Obsidian.

I’ll contact Readwise.

YouTube can restrict playing embedded videos.

Remember: this is DEVONthink, not Obsidian. Just because something works in one application, it doesn’t logically follow it will work in others. And Obsidian is known for doing its own proprietary things.

2 Likes

I guess many websites nowadays would prevent inclusion of their pages or content via iframe elements. There’s copyright, and links aka a elements exist just for this purpose: referring (!) to current in other sites.

3 Likes

I can understand that, though these YT links (either iFrame, or dragging and dropping the URL from the browser) work in other apps (Obsidian / iframe, Apple Notes drag and drop…) so the issue is rather the way the destination app process these url/links ?

I get it, which also means that the issue is on the app side, and that DT could handle these links properly as other apps (Obsidian, Apple Notes..) can ? Could we see this happen in the future ? #FeatureRequest

From your screenshots, I can’t see what you do in DT and what you get when the MD file is rendered.
I suggest that you convert three MD to HTML in DT and openness that HTML in Safari. What does its developer console tell you then?

Background: DT does not really do anything with your iframe element – it relies on Apple’s Web framework to render the HTML.

1 Like

The request is noted, with no promises.

1 Like

I’m trying 2 things :

  • A. Integrate in DT notes a video link (Youtube video, generally) with its preview. Which I’m used to do in Apple Notes (drag and drop of the URL) or Obsidian (copy of the iFrame link), being able to play the video without leaving the note.

To pretend I understand these HTML things (which Is obviously not the case) : <iframe> : l'élément de cadre intégré - HTML | MDN

  • B. Import in DT Readwise Reader éléments/pages/notes, like :
  1. Direct link (browser URL) : Reader
  2. Public link : Use Obsidian and DEVONthink Together! - Effective Remote Work | annotated by renaudsavignard

Why ? because these Readwise Reader documents are

  • already tagged,
  • include the transcript under the video (see screen capture),
  • and annotations already made..

Very convenient. That’s why I would be happy to use them, or some of them in DT. I have thousands of these valuable pieces of information.

Any kind of integration -or bridge between RR and DT would be appreciate by many people I guess !
#FeatureRequest.

Unless I missed an existing way to do that ?

1 Like

I understand A. And I tried to get to the root of the problem. Which is not possible without you following the steps I described.

And it’s not a good idea to squeeze two issues into one thread. I’ll not deal with B therefore.

I understand. I’m going to try what you suggested me.
Regarding A and B, do you suggest I do a new post with B ?

Exactly. It’s easier to handle separate issues separately.

1 Like

Ok here is what I get :

  • 3 md files with 3 different iframes pasted, then converted in HTML
  • 3 HTML links extracted from these converted files :

Regarder la vidéo sur YouTube

Regarder la vidéo sur YouTube

Regarder la vidéo sur YouTube

Screen copy of one of these html files attached

  • Safari console log copy :

[Error] XMLHttpRequest cannot load https://www.youtube.com/youtubei/v1/log_event?alt=json due to access control checks.
H2A (m=kevlar_base_module,kevlar_main_module:1407:165)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:1415)
t_v (m=kevlar_base_module,kevlar_main_module:1601:280)
k (m=kevlar_base_module,kevlar_main_module:7457:129)
URX (m=kevlar_base_module,kevlar_main_module:7458)
BsL (m=kevlar_base_module,kevlar_main_module:1702)
HCu (m=kevlar_base_module,kevlar_main_module:1693:432)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:1691:267)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:6210:297)
PZv (m=kevlar_base_module,kevlar_main_module:1691)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:1736:296)
callback (m=kevlar_base_module,kevlar_main_module:21938:174)
p7u (m=kevlar_base_module,kevlar_main_module:1678:91)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:7497:264)
P (scheduler.js:42)
O (scheduler.js:37:258)
ta (scheduler.js:59)
Rct (m=kevlar_base_module,kevlar_main_module:7153)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:7497:199)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:7496)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:13877)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:7493)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:13876:214)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:7493)
(fonction anonyme) (m=kevlar_base_module,kevlar_main_module:13871:125)
[Error] Erreurs de chargement du mappage de sources (x4)
[Error] Failed to load resource: the server responded with a status of 404 () (fast-shim.js.sourcemap, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (web-animations-next-lite.min.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (fast-shim.js.sourcemap, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (webcomponents-sd.js.sourcemap, line 0)
[Info] LegacyDataMixin will be applied to all legacy elements. (m=kevlar_base_module,kevlar_main_module, line 9899)
Set _legacyUndefinedCheck: true on element class to enable.
[Error] SyntaxError: Can’t create duplicate variable: ‘SafariAppExtensionPage’
write
(fonction anonyme) (index.js:168:71208)
(fonction anonyme) (index.js:168:71887)
(fonction anonyme) (index.js:168:38629)
init (index.js:168:38185)
F (index.js:168:37079)
_initRangyHighlighter (index.js:192:338)
[Error] SyntaxError: Can’t create duplicate variable: ‘SafariAppExtensionPage’
write
(fonction anonyme) (index.js:168:106825)
(fonction anonyme) (index.js:168:107395)
(fonction anonyme) (index.js:168:38629)
init (index.js:168:38185)
F (index.js:168:37079)
_initRangyHighlighter (index.js:192:338)
[Error] Failed to load resource: the server responded with a status of 403 () (videoplayback, line 0)
[Error] Failed to load resource: the server responded with a status of 403 () (videoplayback, line 0)
[Error] Failed to load resource: the server responded with a status of 403 () (videoplayback, line 0)
[Error] Failed to load resource: the server responded with a status of 403 () (videoplayback, line 0)
[Error] Failed to load resource: the server responded with a status of 403 () (videoplayback, line 0)
[Error] Failed to load resource: the server responded with a status of 403 () (videoplayback, line 0)
[Error] ResizeObserver loop completed with undelivered notifications. (watch, line 0)
[Warning] The resource https://i.ytimg.com/generate_204 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Warning] The resource https://rr2---sn-25ge7nz6.googlevideo.com/generate_204 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.
[Warning] The resource https://rr2---sn-25glenlz.c.youtube.com/generate_204 was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it wasn’t preloaded for nothing.

There you go (posting these messages as code ie fenced by three backquotes would make it easier to read).
But as you can see, the server responds with an HTML error. And some kevlar_base_module is involved. Perhaps an extension you’ve installed in Safari? Systemwide?
You could try to open the HTML with another browser like Chrome or Firefox and see if the same problem occurs. In any case, I doubt that DT is the culprit here.

A link to a video is not the same as playing embedded video in the document. And Apple Notes doesn’t support playing embedded video.

There you go (posting these messages as code ie fenced by three backquotes would make it easier to read).

Sorry, that’ the first time I do this, I didn’t find a way to share it another way…

But as you can see, the server responds with an HTML error. And some kevlar_base_module is involved. Perhaps an extension you’ve installed in Safari? Systemwide?

I don’t see where it could come from, it’s brand new Mac from last week, installed from scratch.

You could try to open the HTML with another browser like Chrome or Firefox and see if the same problem occurs. In any case, I doubt that DT is the culprit here.

Tried in Chrome, and looked in the console and asked for an interpretation : Failed to load resource: net::ERR_NAME_NOT_RESOLVED – Qwant Search

Summary

  • DNS Issue: The browser cannot find the IP address for the requested domain.
  • Primary Cause: Usually a typo in the URL or an incorrectly configured environment variable.
  • Fix: Verify the domain’s existence, correct the spelling in your source code, or update your local DNS settings.

So a DNS issue ??

Regarding Apple Notes :

  • Pasting an iframe code doesn’t allow the corresponding video to be displayed, nor played
  • Embedding the same (YouTube) video by a simple drag’n drop from its URL in the browser DOES work, AND you can play it within the note ! (though not in full size)

I just did it, unfortunately I can’t share the screen capture video I made.

This is what I would like to do in DT, by either of these two methods.