How I take notes for YouTube videos

YiNote is a free Chrome extension to take notes as you watch through a YouTube video. It has saved me countless hours in going to and fro between two screens to take notes.

Despite being an incredible tool to keep your video notes organised in a single place, I really did not like the way it exports notes in markdown format.

I came across a blog by Nicole van der Hoeven about her YiNote to Roam Research Workflow. This inspired me to build a similar thing for markdown editors.

I wrote this quick dirty NodeJS implementation of it.

	"use strict"
	const fs = require("fs")
	const path = require("path")
	const srcPath = "file/Path/"
	fs.readFile(path.join(srcPath, "yi-note.json"), (err, data) => {
	if (err) throw err
	const yin = JSON.parse(data)
	const { timestamp, ...rest } = yin.data[1]
	yin.data.map(video => {
	writeMd(video)
	})
	})
	const writeMd = (video) => {
	const urlId = video.meta.url.split("=")[1]
	const fileName = video.meta.title
	const filePath = path.join(srcPath,`${fileName} ${urlId}.md`)
	const [day, time] = new Date(video.createdAt).toISOString().split("T")
	const tags = video.meta.keywords.map((tag) => tag.replace(/\s/g, "-"))
	if (!fs.existsSync(filePath) && video.tags && video.tags.includes('1')) {
	const frontmatter = `---
	type: videos
	status:
	title:
	source: ${video.meta.url}
	creator: "@ Someone"s
	file.cday: ${day}
	modifiedOn:
	publishedOn:
	tags: ${tags}
	aliases: []
	---`
	const title = `# ${fileName}`
	const hhmm = time.match(/[^:]+(\:[^:]+)?/g)[0]
	const sub = `${day} ${hhmm} | [[+]] [source](${video.meta.url}) | #youtube
	by [[@ Someone]]`
	const iframe = `
	<div class="videoWrapper">
	<iframe src="https://www.youtube.com/embed/${urlId}" allow\="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
	</iframe>
	</div>
	${video.meta.description}
	`
	const subhead = `## Highlights`
	let highlights = ''
	video.notes.map(note =>
	{
	const ts = new Date(note.timestamp * 1000).toISOString().substr(11, 8);
	highlights += `
	- [${ts}](${video.meta.url}&t=${note.timestamp})
	- ${note.content}`
	}
	)
	const md = `${frontmatter}\n${title}\n${sub}\n${iframe}\n${subhead}\n${highlights}`
	fs.writeFile(filePath, md, function (err) {
	if (err) {
	return console.log(err)
	}
	console.log(`The "${fileName}" was saved!`)
	})
	}
	}

view raw yinote2md.js hosted with ❤ by GitHub

I run this script to use the exported json file from YiNote to turn all my video notes into a customised markdown format.

And the end result is this in Obsidian Editor!!