Get Title, Channel Name and Upload Date for YouTube link

[sampokantola]

Automatically format YouTube link as [Channel Name, ▶ *Video Title*, (<upload-year>)](https://youtu.be/video-id)

<%*
let url = await tp.system.clipboard();
let page = await tp.obsidian.request({url});
let p = new DOMParser();
let doc = p.parseFromString(page, "text/html");
let $ = s => doc.querySelector(s);
%>[<%
$("link[itemprop='name']").getAttribute("content") %>, ▶ *<%
$("meta[property='og:title']").content %>*, (<%
$("meta[itemprop='uploadDate']").content.slice(0, 4) %>)](<%
$("link[rel='shortLinkUrl']").href %>)

[abhinav4848]

With live preview, the asterisk really throw off the link underlining due to video title becoming italic. So here's the same code as above but without the asterisk for those who would prefer it this way.

<%*
let url = await tp.system.clipboard();
let page = await tp.obsidian.request({url});
let p = new DOMParser();
let doc = p.parseFromString(page, "text/html");
let $ = s => doc.querySelector(s);
%>[<%
$("link[itemprop='name']").getAttribute("content") %>, ▶ <%
$("meta[property='og:title']").content %>, (<%
$("meta[itemprop='uploadDate']").content.slice(0, 4) %>)](<%
$("link[rel='shortLinkUrl']").href %>)

[mardukbp]

No upload year, but works on Obsidian mobile :)

<%*
let yt_url = await navigator.clipboard.readText();
let url = "https://www.youtube.com/oembed?format=json&url="+yt_url;
let resp = await tp.obsidian.request({url});
let video = JSON.parse(resp);
%>[<%video["author_name"]%>, ▶ *<%video["title"]%>*](<%yt_url%>)

[huenchen]

Thank you for the template, I extended it a little, with duration, embed and description. Unfortunately the description is only a verry short abridged one.

<%*
let url = await tp.system.clipboard();
let page = await tp.obsidian.request({url});
let p = new DOMParser();
let doc = p. parseFromString(page, "text/html");
let $ = s => doc.querySelector(s);

let qcFileName1 = $("meta[property='og:title']").content;
let qcFileName = qcFileName1.replace(/:/g, "_");
titleName = "🎬 " + qcFileName;
await tp.file.move("/Videos/"  + titleName);
let duration2 = $("meta[itemprop='duration']").content.slice(2);
let duration1 = duration2.replace(/M/gi, " Min ") ;
let duration = duration1.replace(/S/gi, " Sec ") ;
%>

---

tags: 🎬
aliases: 
  - 
cssclass: 
type: video

---

- `Title:` *<%
$("meta[property='og:title']").content %>
- `Type:` [[+]]
- `Tags:` 🎬 
- `URL:` <%
$("link[rel='shortLinkUrl']").href %>
- `Channel/Host:` <%
$("link[itemprop='name']").getAttribute("content") %>
- `Reference:` Details: <% $("meta[itemprop='description']").content %>
- `Publish Date:` <%
$("meta[itemprop='uploadDate']").content.slice(0, 4) %>
- `Duration`: <% duration %>
- `Status`: Not watched yet 
- `Reviewed Date:` [[<%tp.date.now()%>]]

---

# <% qcFileName %>

[<%
$("link[itemprop='name']").getAttribute("content") %>, ▶ *<%
$("meta[property='og:title']").content %>*, (<%
$("meta[itemprop='uploadDate']").content.slice(0, 4) %>)](<%
$("link[rel='shortLinkUrl']").href %>)


<center><iframe width="560" height="315" src="https://www.youtube.com/embed/<% $("meta[itemprop='videoId']").content %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>

Details: <% $("meta[itemprop='description']").getAttribute("content") %>

[ILyaCyclone]

Thanks! This one needed a little fix for me, as apparently meta itemprop="videoId" is no longer a thing. But there is now a meta itemprop="identifier". So embed line should be changed to

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/<% $("meta[itemprop='identifier']").content %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>

[JustAnotherSapiens]

How do you know which selectors to use in the querySelector?
It doesn't seem to be the same HTML from opening the Dev Tools at the YouTube link.

[sampokantola]

I think I used wget or curl to get the page and used that as reference. The dev tools version is different because youtube changes the html dynamically with js

[JustAnotherSapiens]

I found out that that version of the HTML document can also be accessed from the Dev Tools. Just go to the "Sources" tab and find the document that matches the URL.

By the way, I also made a generic scraper from a YouTube link, with some variables repeating from different selectors, and also dates and duration formatted for readability:

Edit: Forgot to subtract 1 to the month selector (thanks @willasm).

<%*
let url = await tp.system.clipboard();
let page = await tp.obsidian.request({url});
let p = new DOMParser();
let doc = p.parseFromString(page, "text/html");
let $ = (s) => doc.querySelector(s);

let canonical = $("link[rel='canonical']").href.split('&')[0];
let title = $("meta[name='title']").content;
let description = $("meta[name='description']").content;
let keywords = $("meta[name='keywords']").content;
let shortlinkUrl = $("link[rel='shortlinkUrl']").href.split('?')[0];
let imageSrc = $("link[rel='image_src']").href;

let ogSiteName = $("meta[property='og:site_name']").content;
let ogUrl = $("meta[property='og:url']").content.split('&')[0];
let ogTitle = $("meta[property='og:title']").content;
let ogImage = $("meta[property='og:image']").content;
let ogDescription = $("meta[property='og:description']").content;

let duration = $("meta[itemprop='duration']").content.slice(2, -1);
let authorUrl = $("span[itemprop='author'] > link[itemprop='url']").href;
let authorName = $("span[itemprop='author'] > link[itemprop='name']").getAttribute("content"); // Dot notation doesn't work here
let thumbnailUrl = $("link[itemprop='thumbnailUrl']").href;
let datePublished = $("meta[itemprop='datePublished']").content;
let uploadDate = $("meta[itemprop='uploadDate']").content;
let genre = $("meta[itemprop='genre']").content;

const timeStr = (time) => time.toString().padStart(2, '0');
let [minutes, seconds] = duration.split("M");
let hours = Math.floor(Number(minutes) / 60);
minutes = (Number(minutes) % 60);
duration = `${timeStr(minutes)}:${timeStr(seconds)}`;
if (hours > 0) {duration = `${timeStr(hours)}:` + duration}

const formatDate = (date) => {
    let [year, month, day] = date.split('-');
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    let monthName = months[Number(month) - 1];
    return `${day} ${monthName} ${year}`;
};
datePublished = formatDate(datePublished);
uploadDate = formatDate(uploadDate);

-%>
|      var      | value               |
|:-------------:|:------------------- |
|  ogSiteName   | <% ogSiteName %>    |
|   canonical   | <% canonical %>     |
|     ogUrl     | <% ogUrl %>         |
| shortlinkUrl  | <% shortlinkUrl %>  |
|     title     | <% title %>         |
|    ogTitle    | <% ogTitle %>       |
|  description  | <% description %>   |
| ogDescription | <% ogDescription %> |
|   imageSrc    | <% imageSrc %>      |
|    ogImage    | <% ogImage %>       |
| thumbnailUrl  | <% thumbnailUrl %>  |
|   keywords    | <% keywords %>      |
|     genre     | <% genre %>         |
|   duration    | <% duration %>      |
| datePublished | <% datePublished %> |
|  uploadDate   | <% uploadDate %>    |
|   authorUrl   | <% authorUrl %>     |
|  authorName   | <% authorName %>    |

[willasm]

@JustAnotherSapiens
The month needs to be decremented by 1 to get the correct index in the array. Just change the line to this...

let monthName = months[Number(month-1)];

[JustAnotherSapiens]

months[Number(month) - 1]

@willasm I have already corrected it in the original comment, thank you for pointing it out!

[mishipal]

Can we get Summary of Youtube Transcript or just the transcript of the video?

[Tom-Mi1984]

Hello, I have had the same question to save time typing. ChatPGT 3.5 does a decent job of rewriting the transcript if the transcript copied in is fairly short. I copy sections based on the index. I tell it to rewrite the transcript and include summary Headers starting at level 3 markdown. It will put the timestamped links at the header level if asked. Google Whisper will also generate transcripts from Youtube .mp4 files. Best FREE Speech to Text AI - Whisper AI . https://4kdownload.com/ can be used to download the .mp4 with the youtube URL.

[dmantula]

Thanks for great snippets!

Btw, quite often Youtube titles contain characters that are not suitable for file names, so I modified the replace a bit:

let qcFileName = qcFileName1.replace(/[\\/:*?"<>|]/g, "_");

Also I create alias in YAML frontmatter to maintain the original file name, just in case:

aliases:
  - "<% 
$("meta[property='og:title']").content %> (YouTube)"

[neitsab]

How to use this template

• install the Templater extension
• open Obsidian settings, go to the Templater extension settings and configure the Template folder location
• create a new markdown file inside the folder you just configured called whatever you want the template to be named, e.g. youtube
• paste the content of one of the versions on this page in this file, e.g. for the original one the file content would be (at its simplest):

<%*
let url = await tp.system.clipboard();
let page = await tp.obsidian.request({url});
let p = new DOMParser();
let doc = p.parseFromString(page, "text/html");
let $ = s => doc.querySelector(s);
%>[<%
$("link[itemprop='name']").getAttribute("content") %>, ▶ *<%
$("meta[property='og:title']").content %>*, (<%
$("meta[itemprop='uploadDate']").content.slice(0, 4) %>)](<%
$("link[rel='shortLinkUrl']").href %>)

• copy the Youtube link; the URL MUST be the current item in your clipboard, or else it will silently fail!!
• go wherever you want to paste the formatted link, and use either the Templater icon in the sidebar or the command palette to insert the youtube template (or whatever you named it)
• if it is working, no error message will appear and it will process for a few seconds (the time to retrieve the desired info from the page); then it will paste the formatted link at the current cursor position
• enjoy the well formatted Youtube link.
• if it works, you might want to add a keyboard shortcut to execute this template: go to the extension settings > Template Hotkeys, in the dialog box select your templat, click on the + on the right ("Configure Hotkey") which will lead you to general Obsidian Hotkeys; search for your template name (e.g. youtube here) and add your desired shortcut.

I hope this will help Templater beginners like me who struggled to get this to work!

Edit: added a comma and step to add a keyboard shortcut

[neitsab]

To add to the existing snippets, here's mine which produces [Video title](shortUrl) (YT <channel> <uploadDate:YYYY-MM>):

<%*
let url = await tp.system.clipboard();
let page = await tp.obsidian.request({url});
let p = new DOMParser();
let doc = p.parseFromString(page, "text/html");
let $ = s => doc.querySelector(s);
%>[<%
$("meta[property='og:title']").content %>](<%
$("link[rel='shortLinkUrl']").href %>) (YT <%
$("link[itemprop='name']").getAttribute("content") %> <%
$("meta[itemprop='uploadDate']").content.slice(0, 7)%>)

Example:

Automate Your Vault With Templater - How to Use Templater in Obsidian (YT FromSergio 2022-07)