Embedded video

9.4. Embedded video

I’ve made a couple of nice Notenik videos that are both available on YouTube, so let’s embed those.

For our first pass at this, we’re just going to copy and embed the HTML code provided by YouTube, in just the same way that Blake did. There is nothing particular to Markdown or Notenik here.

Here’s the way the code looks.

<iframe width="560" height="315" src="https://www.youtube.com/embed/JR0kpAUXM5E?si=b6oOKKQGSMSweqTv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

And here’s what happens when you embed it in your Body.

That’s the first way to do this, but it has all the same issues that Blake identified.

So now we’ll see how to do it the second way.

Custom HTML tags

Let’s see how we can make use of the same web component that Blake found, called Lite YouTube Embed.

Here’s how we’ll install it for use within Notenik.

First, download the same two files:

Next, let’s create a new folder within the posts content folder and call it add-ins.

And then let’s drag the two files we downloaded into our new add-ins folder.

Finally, let’s reload our collection in Notenik to make sure Notenik is aware of our new add-ins. We can do this with Collection > Reload Collection (Opt-Cmd-J).

Now we’re ready to add the new lite-youtube tags to the body of our Fun note.

So here’s what our Videos section will end up looking like.

## Notenik Videos

Here are a couple of short (10-minute) videos demonstrating how to use Notenik. 

<lite-youtube videoid="JR0kpAUXM5E"></lite-youtube>

----

<lite-youtube videoid="Qy0hejViBHI"></lite-youtube>

And here’s the first video, as it will be embedded using lite-youtube.

Next: 9.5. Template changes